vue 快速入门 系列 —— vue-router

其他章节请看:

vue 快速入门 系列

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

什么是路由

路由就是根据不同的 url(网址) 返回不同的页面(数据)。如果这个工作在后端做(或者说由后端程序员做),就是后端路由;在前端做就是前端路由。

绝大多数的网站是后端路由。流程就像这样:

  1. 浏览器输入 url,回车
  2. 后端服务器接收到请求
  3. 将请求(url)交给对应的处理逻辑 —— 有一个专门的正则配置列表来分发
  4. 各种操作完成后,最后将页面(数据)返回给浏览器

平时总说的 SPA(单页面应用)就是前后端分离的基础上,再加一层前端路由。

Vue Router 的核心

无论是后端路由还是前端路由,解决的核心问题应该都是一样的。

后端路由常见的 2 种场景:

  • 浏览器输入 url,后端返回相应的页面
  • 在网页中点击 a 标签,跳转到 a 标签指向的页面

Vue Router 与后端路由对应的场景:

  • 根据 url 返回相应的组件
    • 核心1:提供一个 map 的数据结构解决此事
  • 在网页中点击标签,跳转到相应的页面
    • 核心2:提供内置标签 <router-link>,默认是a标签
  • 由于是做单页面应用,也就是只有一个页面,切换页面也就是切换组件,那么组件在哪里显示,这是前端路由需要解决的
    • 核心3:提供<router-view>来解决此事

环境准备

通过 vue-cli 创建项目

// 项目预设 `[Vue 2] less`, `babel`, `router`, `vuex`, `eslint`
$ vue create test-vue-router

启动服务:

$ test-vue-router> npm run serve

页面如果成功显示,说明环境准备完成,下面的例子都是基于这个项目进行。

Tip:保存代码如果遇到 eslint 的干扰(例如下面信息),可以通过配置 lintOnSave 生产构建时禁用 eslint-loader

test-vue-router\src\views\About.vue
   7:1   error  More than 1 blank line not allowed         no-multiple-empty-lines
  12:10  error  Missing space before function parentheses  space-before-function-paren
  16:14  error  Missing space before function parentheses  space-before-function-paren
  18:38  error  Extra semicolon                            semi
  20:7   error  Block must not be padded by blank lines    padded-blocks

✖ 5 problems (5 errors, 0 warnings)
  5 errors and 0 warnings potentially fixable with the `--fix` option.
// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

demo1 – 起步 – 欢迎来到首页

需求:访问 //localhost:8080/,页面显示 欢迎来到首页

步骤如下:

首先我们查看 router 的核心文件:

// src/router/index.js
// vue-cli自动生成。无需修改
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)
// 核心1 - map
const routes = [
  {
    path: '/',             // {1}
    name: 'Home',
    component: Home       // {2}
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
// 实例化路由器
const router = new VueRouter({
  routes
})

export default router

接着修改 App.vue 和 Home.vue 即可:

// src/views/Home.vue
<template>
    <p>欢迎来到首页</p>
</template>
// src/App.vue
<template>
  <div id="app">
    <!-- 核心3 - <router-view> 渲染路径匹配到的视图组件-->
    <router-view/>                      
  </div>
</template>

流程是:

  1. 浏览器输入 //localhost:8080/
  2. 在 map 中匹配(行{1})
  3. 将 map 中匹配到的组件(行{2})渲染到 <router-view/>

demo2 – 注册

需求:在首页中增加一个注册按钮,点击注册,跳转到注册页。在注册页点击注册,在回到首页。(建议在demo1基础上做)

以下是核心代码:

// views/Home.vue
<template>
  <div>
    <p>
      <!-- 核心2 - to 表示目标路由的链接 -->
      <router-link to="/register">注册</router-link>
    </p>
    <p>欢迎来到首页</p>
  </div>
</template>
// router/index.js
// 新增
import Register from '../views/Register'

const routes = [                    
  {
    path: '/',
    component: Home                  
  },
  // 新增
  {
    path: '/register',
    component: Register          
  }
]
// views/Register.vue
<template>
  <section>
    <p>用户名:<input type="text" /></p>
    <p>密码:<input type="password" /></p>
    <p><router-link to="/">注册</router-link></p>
  </section>
</template>

动态路由匹配

$route.params

我们经常需要把某种模式匹配到的所有路由,全都映射到同一个组件。可以这样:

// router/index
routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]

/user/foo/user/bar 都将映射到相同的路由

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。

需求:创建一个显示文章的组件,根据不同的 id 显示对应的文章,url 是 /article/:id

// router/index.js
// 新增
import Article from '../views/Article'

const routes = [                    
  // 新增
  {
    path: '/article/:id',
    component: Article          
  }
]
// views/Article.vue
<template>
    <div>
        <p>文章列表页</p>
        <p>这是对应 <em>{{ $route.params.id }}</em> 的文章</p>
    </div>
</template>

测试:

浏览器输入://localhost:8080/article/2

页面输出:
文章列表页

这是对应 2 的文章

Tip$route(路由对象) 对象还提供了其它有用的信息:

  • $route.path,字符串,对应当前路由的路径,总是解析为绝对路径,如 “/foo/bar”
  • $route.query,一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。
  • $route.hash,当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串
  • $route.fullPath,完成解析后的 URL,包含查询参数和 hash 的完整路径。
  • $route.matched
  • $route.name,当前路由的名称,如果有的话
  • $route.redirectedFrom,如果存在重定向,即为重定向来源的路由的名字

匹配优先级

有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:路由定义得越早,优先级就越高。

嵌套路由

嵌套路由也或叫子路由。即一个组件内可以有自己的<router-view>

常见的的一个场景是,有一个组件 Article,里面有个坑位,这个坑位有时(根据url的变化)需要显示 ArticleComponentA 组件,有时显示 ArticleComponentB 组件。

index.js:

// 新增
import ArticleComponentA from '../views/ArticleComponentA'
import ArticleComponentB from '../views/ArticleComponentB'

const routes = [                    
  // 新增
  {
    path: '/article/:id',
    component: Article,
    children: [
      {
        // 当 /user/:id/ca 匹配成功,
        // ArticleComponentA 会被渲染在 User 的 <router-view> 中
        path: 'ca',
        component: ArticleComponentA
      },
      {
        // 当 /user/:id/cb 匹配成功
        path: 'cb',
        component: ArticleComponentB
      }
    ]       
  }
]
// views/ArticleComponentA.vue
<template>
  <div style="border: 1px solid">
    <p>我是A</p>
    <p>
      这是对应 <em>{{ $route.params.id }}</em> 的文章
    </p>
  </div>
</template>
// views/ArticleComponentA.vue
<template>
  <div style="border: 1px solid">
    <p>我是B</p>
    <p>
      这是对应 <em>{{ $route.params.id }}</em> 的文章
    </p>
  </div>
</template>
// views/Article.vue
<template>
  <div>
    <p>文章列表页</p>
    <!-- 子路由 -->
    <router-view></router-view>
  </div>
</template>

测试:

浏览器输入://localhost:8080/article/1/cb

页面显示:
文章列表页

我是B

这是对应 1 的文章

编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

需求:编写支付组件,显示支付成功,三秒后自动跳转到首页

index.js:

// 新增
import Pay from '../views/Pay'

const routes = [                    
  // 新增
  {
    path: '/pay',
    component: Pay          
  },
]

Pay.vue:

<template>
    <div>
        <p>支付成功,三秒后自动跳转到首页</p>
    </div>
</template>

<script>
export default {
    created: function(){
        setTimeout(()=>{
            // 编程式导航
            this.$router.push('/')
        }, 3000)
    }
}
</script>

测试:

浏览器输入: //localhost:8080/#/pay

页面显示“支付成功,三秒后自动跳转到首页”,过三秒,页面跳转到首页。

命名路由

有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。

需求:给首页路由起一个名字,新建一个组件(NamedRouter),组件中可以通过命名路由,使用链接(<router-link></router-link>)或方法跳转到首页

// views/NamedRouter.vue
<template>
  <div>
    <p>
      <!-- 通过命名路由跳转 -->
      <router-link :to="{ name: 'home-page' }">链接跳转</router-link>
    </p>
    <p>
      <button @click="handleClick">编程式跳转</button>
    </p>
  </div>
</template>

<script>
export default {
    methods: {
        handleClick: function(){
            this.$router.push({ name: 'home-page'})
        }
    }
}
</script>

index.js:

// 新增
import NamedRouter from '../views/NamedRouter'

const routes = [  
  // 修改
  {
    path: '/',
    // 命名路由
    name: 'home-page',
    component: Home
  },
  // 新增
  // 浏览器输入://localhost:8080/namedRouter
  {
    path: '/namedRouter',
    component: NamedRouter
  },
]

自行测试即可

命名视图

有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。

用法1-命名视图

直接上代码:

// src/App.vue
<template>
  <div id="app">
    <!-- 定义两个视图(sidebar 和 main) -->
    <router-view class="sidebar" name='sidebar'></router-view>
    <router-view class="main" name="main"></router-view>
  </div>
</template>
// views/TestMain.vue
<template>
  <p>我是 TestMain</p>
</template>
// views/TestSidebar.vue
<template>
  <p>我是 TestSidebar</p>
</template>
// router/index.js
// 新增
import TestSidebar from '../views/TestSidebar'
import TestMain from '../views/TestMain'

const routes = [     
  // 修改               
  {
    path: '/',
    components: {
      main: TestMain,
      sidebar: TestSidebar
    },
    name: 'home-page'                  
  },
  ...
]

测试:

浏览器访问://localhost:8080/

页面显示:
我是 TestSidebar

我是 TestMain

用法2-嵌套命名视图

需求:某组件有两个视图,组件A,组件B分别放在这两个视图中

直接上代码:

// App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>
// views/TestHome.vue
<template>
  <div class="test-home">
    <!-- 定义两个视图(sidebar 和 main) -->
    <router-view class="sidebar" name="sidebar"></router-view>
    <router-view class="main" name="main"></router-view>
  </div>
</template>
// router/index.js
// 新增
import TestSidebar from '../views/TestSidebar'
import TestMain from '../views/TestMain'
import TestHome from '../views/TestHome'

const routes = [      
  // 新增              
  {
    path: '/',
    component: TestHome,
    children: [
      {
        // path 为空,则能匹配 /
        // 如果 path 不为空(xx1),则只能匹配 /xx1
        path: '',
        components: {
          main: TestMain,
          sidebar: TestSidebar
        }
        
      }
    ],
    // 命名路由
    name: 'home-page'                  
  },
  ...
]

TestMain.vue 和 TestSidebar.vue 不变。

自行测试即可。

重定向和别名

重定向

需求:访问支付(/pay),重定向到主页(/)。

const routes = [ 
  { 
    path: '/pay', 
    redirect: '/' 
  }
]

测试:

输入://localhost:8080/#/pay
变成://localhost:8080/#/

别名

“重定向”的意思是,当用户访问 /a 时,URL 将会被替换成 /b,然后匹配路由为 /b,那么“别名”又是什么呢?

/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

需求:新增组件(Apple),里面有个子组件(AppleComponentA),给子组件的路由起一个别名,方便访问。

// views/Apple.vue
<template>
  <div>
    <p>苹果</p>
    <router-view></router-view>
  </div>
</template>
// views/AppleComponentA.vue
<template>
  <p>我是嘎嘎果</p>
</template>
// router/index.js
// 新增
import Apple from '../views/Apple'
import AppleComponentA from '../views/AppleComponentA'

const routes = [                    
  // 新增
  {
    path: '/apple',
    component: Apple,
    children: [
      {
        path: 'ca/x1/x2',
        // 别名
        alias: '/cxx',
        component: AppleComponentA
      }
    ]
  }
]

运行:

浏览器输入: 
//localhost:8080/apple/ca/x1/x2
或
//localhost:8080/cxx

页面输出:
苹果

我是嘎嘎果

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

使用 props 将组件和路由解耦

需求:定义一个组件,通过 props 接收路由参数

// views/RouterToParams.vue
<template>
  <p>路由传参 id={{ id }}</p>
</template>
<script>

export default {
    props:['id']
}
</script>
// router/index.js
// 新增
import RouterToParams from '../views/RouterToParams'

const routes = [  
  // 新增
  {
    path: '/routerToParams/:id',
    component: RouterToParams,
    props: true
  },   
]

运行:

浏览器输入: //localhost:8080/routerToParams/2

页面输出:
路由传参 id=2

对象模式

如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。

改为对象模式,直接上代码:

// router/index.js
const routes = [
  {
    path: '/routerToParams/:id',
    component: RouterToParams,
    // props: true
    props: { id2: 10 }
  },
]
// views/RouterToParams.vue
<template>
  <div>
    <p>路由传参 id={{ id }}</p>
    <p>路由传参 id2={{ id2 }}</p>
  </div>
</template>
<script>

export default {
    props:['id2', 'id']
}
</script>

测试:

浏览器输入://localhost:8080/routerToParams/2
页面输出:
路由传参 id=

路由传参 id2=10

函数模式

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。

改为函数模式,直接上代码:

// router/index.js
const routes = [
  {
    path: '/routerToParams/:id',
    component: RouterToParams,
    props: route => ({ id3: route.params.id })
  },
]
// views/RouterToParams.vue
<template>
  <div>
    <p>路由传参 id3={{ id3 }}</p>
  </div>
</template>
<script>

export default {
    props:['id3']
}
</script>

测试:

浏览器输入://localhost:8080/#/routerToParams/2

页面显示:
路由传参 id3=2

HTML5 History 模式

vue-router 默认 hash 模式,如果不想要很丑的 hash,我们可以用路由的 history 模式。

改为 history 模式:

// router/index.js
const router = new VueRouter({
  mode: 'history',
  routes
})

Tip:history 模式还需要一些配置

导航守卫

“导航”表示路由正在发生改变。

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

全局前置守卫

需求:使用 router.beforeEach 注册全局前置守卫,如果访问的是登录(/login)则进入注册页(/register)

// router/index.js
import Register from '../views/Register'

const routes = [  
  {
    path: '/register',
    component: Register
  }
]

// 导航
router.beforeEach((to, from, next) => {
  if (to.path === '/login') next({ path: '/register' })
  // next: Function: 一定要调用该方法来 resolve 这个钩子
  else next()
})

测试:

浏览器输入: //localhost:8080/login 变为 //localhost:8080/register

其他导航守卫请参考官网:

  • 全局后置守卫
  • 路由独享的守卫
  • 组件内的守卫
  • 全局解析守卫

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

路由元信息

Tip:直接根据官网例子来说一下

定义路由的时候可以配置 meta 字段:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何访问这个 meta 字段呢?

首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录

例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

如果路由记录中的 meta.requiresAuth 为 true,则需要验证

元数据,用于描述数据的数据。

过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果。
Transition 的所有功能(vue 官网中的“进入/离开 & 列表过渡”)在这里同样适用。

请看示意代码:

<template>
  <div id="app">
    <p>
      <router-link to='/login'>登录</router-link> |
      <router-link to='/'>首页</router-link>
    </p>
    <transition name="fade">
      <router-view/>
    </transition>
  </div>
</template>
<style >
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

点击登录首页就能看到动画。

Tip:上面的用法会给所有路由设置一样的过渡效果,还有单个路由的过渡,以及基于路由的动态过渡。

数据获取

有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:

  • 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

  • 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。

从技术角度讲,两种方式都不错 —— 就看你想要的用户体验是哪种。

Tip:更具体的信息可以参考官网

滚动行为

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

Tip:更具体的信息可以参考官网

其他章节请看:

vue 快速入门 系列

Tags: