在定义路由规则时，可以设置选项 meta 元信息，传递一个对象，以键值对的形式存储关于该路由的相关信息，然后就可以通过 $route.meta 进行访问调用。相当于为路由增添一些除了路径以为的其他的信息。

Play Video

可以在配置路由时，通过选项 name 给某个路由设置名称，这样对于路径较长的路由，在设置路由导航时更方便调用。

const router = new VueRouter({
  // 路由规则
  routes: [
    {
      path: '/',
      component: Index
      name: 'index'
    },
  ]
})

要使用一个命名路由，可以给 <router-link> 的属性 to（以绑定的方式传递）传一个对象，其中包含 name 选项（需要非重复，特异值），以指定链接的路径

<router-link to="/">
<!-- 等价的另一种方式 -->
<router-link :to="{name: 'index'}">

const router = new VueRouter({
  // 路由规则
  routes: [
    {
      // 动态路由
      path: '/user/:userId',
      component: User,
      name: 'user'
    },
  ]
})

<!-- 把路由导航到 /user/123 路径 -->
<router-link :to="{name: 'user', params: { userId: 123 }}">User</router-link>

同样地，如果使用编程式导航，可以给相应的方法传递一样的对象

router.push({ name: 'user', params: { userId: 123 } })

Play Video

可以在配置路由时，通过选项 alias 为路由设置别名，该功能可以让你==自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构==。

{
  path: '/a',
  component: A,
    children: [
      {
        path: 'a1',
        component: 'A1',
        alias: '/b'
      }
    ]
}

以上示例的路由设置，在访问 /b 就相当于访问 /a/a1，页面的视图渲染相同的组件，即实现多个网址指向同一个页面

可以在页面模板中同时设置多个 <router-view>（平行关系，而不是通过嵌套路由和嵌套的 <router-view> 实现），不过得为每个视图设置名称 <router-view name="viewName>（没有设置名字则默认为 default），这样就可以在一个路由下「平行」渲染出多个组件。

这时应该在路由的配置中，相应地对于同一个路由要设置多个组件（如果组件数量少于平行的 <router-view> 数量，则相应的多余的视图组件将不会渲染），注意此时选项 components（不是 component）变成一个对象，设置多个组件，每一个属性都是一个组件，键为视图 <router-view> 的的命名 name，值为组件名

{
  path: '/pathName',
  components: {
    default: Index,
    viewName1: Component1,
    viewName2: Component2
  }
}

Play Video

Play Video

结合 Vue 的异步组件和 Webpack 的代码分割功能，可以轻松实现路由所对应的组件的懒加载，即当路由被访问的时候才加载对应组件。

首先将异步组件定义为返回一个 Promise 的工厂函数（返回的 Promise 应该 resolve 组件本身）

const Foo = () =>
  Promise.resolve({
    /* 定义组件的对象 */
  })

然后在 Webpack 2 中，使用动态 import 语法来定义代码分块点

import('./Foo.vue') // 返回 Promise

将两者结合，这定义一个能够被 Webpack 自动代码分割的异步组件：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: () => import('./Foo.vue')
    }
  ]
})

在导入模板时添加特殊的注释语法 /* webpackChunkName: "children" */ 提供 chunk name，Webpack 就会将具有相同块名的异步模块 async module 合并到相同的异步块 async chunk 中，实现按需加载

const Children1 = () => import(/* webpackChunkName: "children" */ './Children1.vue')
const Children2 = () => import(/* webpackChunkName: "children" */ './Children2.vue')

Play Video

使用 <router-link> 组件来导航，它类似于 <a> 标签实现 url 切换，通过属性 to 指定路径

<router-link to="/">Index</router-link>

Play Video

Play Video

使用 Vue Router 提供的方法通过 JS 手动切换 url 路径，称为编程式导航。

借助实例 router 的方法（在 Vue 实例内部，你可以通过 $router 访问路由实例）来实现页面 URL 切换，这些方法是效仿浏览器提供的 API window.history：

• router.push(location, onComplete?, onAbort?) 导航到指定的 location，并向 history 栈添加一个新的记录
• router.replace(location, onComplete?, onAbort?) 导航到指定的 location，它不会向 history 添加新记录，而是替换掉当前的 history 记录
• router.go(n) 在 history 记录中向前或者后退 n 步，类似 window.history.go(n)，如果输入的数值过大或过小，而 history 记录不够用，跳转就会失败

Play Video

导航守卫是在指用户访问特定的路径时，基于条件执行跳转或取消的操作，从而在前端对特定页面和数据进行「保护」。有多种机会植入导航守卫，可以设置全局的、单个路由独享的、或者组件级的路由守卫。

完整的路由导航解析流程：

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

Play Video

一般路由守卫回调函数会接收三个参数：

• to 即将要进入的目标（路由对象 route）
• from 当前导航正要离开的路由对象 route
• next 一个函数，每个路由守卫都应该调用该方法，才可以 resolve Promise 以「放行」，否则页面将会「卡住」，无法顺利跳转或展示数据。
  该执行效果依赖调用 next() 方法时传递参数：
  • next() 不传递参数时，会进行管道中的下一个钩子
  • next(false) 中断当前的导航
  • next('/otherPath') 或者 next({ path: '/otherPath' }) 当前的导航被中断，然后进行一个新的导航。跳转到一个不同的地址
    Tip

    传递对象可以定制跳转的方式，如 next({ replace: true, name: 'home' }) 以取代历史记录的方式，跳转导航到首页。

  • next(error) 传入 next 的参数是一个 Error 实例，则导航会被终止。

Play Video

以下是常用的路由守卫钩子函数，根据实际情况选择合适的钩子函数进行路由守卫：

router.beforeEach((to, from, next) => {
  ...
})

{
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
    ...
  }
}

router.afterEach((to, from) => {
  // ...
})

在访问网页需要从服务器获取数据，一般有两种时机可以选择：

• 在导航完成之后获取数据：先完成导航，然后在接下来的组件生命周期钩子函数中获取数据。在数据获取期间显示 Loading 之类的指示。这个时机一般是获取页面数据。
• 导航完成之前获取：导航完成前，在路由进入的守卫钩子函数中获取数据，在数据获取成功后执行导航。在获取数据时会停止跳转，用户会停留在当前的界面，有种「卡住」的感觉，因此建议在数据获取期间，显示一些进度条或者别的指示。这个时机一般是基于验证、会员内容的数据获取。

Play Video

可以在设置路由时，通过选项 scrollBehavior 设置切换页面时如何滚动，该选项是一个方法，返回一个包含页面该如何滚动相关信息的对象

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return { x: number, y: number } // 期望滚动到页面指定的位置
  }
})

返回滚动位置的对象信息可以有多种格式：

• 滚动到指定的坐标轴 return { x: number, y: number }，一般对于所有路由导航，:IconCustom{name="mdi:youtube" iconClass="text-red-500"} 简单地让页面滚动到顶部 return { x: 0, y: 0 }
  Play Video
• 滚动到指定锚点 return { selector: to.hash }
• 滚动到原来位置 return savedPosition 该值当且仅当通过浏览器的 前进/后退 按钮触发（popstate 导航）时才可用

// ...
scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500) // 延迟 500ms 后才进行页面滚动
  })
}

// ...
scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth',
    }
  }
}

可以用 <transition> 组件给所有路由组件 <router-view> 添加过渡效果，这样在路由切换时，组件就可以有相应的进入/离开的动效。

<transition>
  <router-view></router-view>
</transition>

如果动画效果不生效，一般是由于 Vue 对组件进行复用，:IconCustom{name="mdi:youtube" iconClass="text-red-500"} 可以将 $route 相关信息，如 $route.path 或 $route.fullPath 作为 <router-view> 组件的 key 属性值 ::

Play Video