在路由跳转的整个过程中，存在一系列的钩子函数（类似vue的生命周期）【下文中：导航即路由】

路由的解析流程

  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​​ 的回调函数，创建好的组件实例会作为回调函数的参数传入。

相关参数详解

路由的钩子函数中，主要有三种参数：

  1. to —— 数据类型：路由 —— 即将进入的路由
  2. from —— 数据类型：路由 —— 即将离开的路由
  3. next —— 数据类型：函数 —— 传入不同的参数会得到不同的路由走向
  • ​​next()​​:—— 继续向to路由对应的地址跳转，进行路由解析过程中的下一个钩子函数。如果全部钩子函数执行完了，则路由的状态就是confirmed(确认的)。
  • ​​next(false) ​​​—— 中断当前路由跳转，停留/重置到​​from​​ 路由对应的地址。
  • ​​next('/')​​ 或者 ​​next({ path: '/' })​​—— 中断当前路由跳转，跳转到指定的新地址。参数规则与​​router-link 的 to​​​和​​router.push​​ () 相同
  • ​​next(error)​​​: (2.4.0+) —— 终止导航，并将错误传递给​​router.onError()​​ 注册过的回调。

注意事项：每个接受next函数参数的路由钩子函数都要以next函数作为结束（确保 ​​next​​ 函数在任何给定的导航守卫中都被严格调用一次）

全局路由守卫

每个路由跳转，都会执行

router.beforeEach（路由解析第3步）

router.beforeEach((to, from, next) => {
  // 需鉴权的路由—— 判断路由的meta元数据中，是否requiresAuth为true
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断用户是否已登录
    if (sessionStorage.getItem('isLogin')) {
      // 已登录，则跳转到目标路由（需要用户登录的页面）
      next()
    } else {
      // 未登录，跳转到登录页
      next('/login')
    }
  } else {
    // 公共页面，直接跳转到目标路由
    next()
  }
})

 meta 元数据

{
    path: '/add',
    name: 'add',
    component: Add,
    meta: { requiresAuth: true }
  },

实战案例 —— 路由跳转时，页面标题随路由变化

router.beforeEach((to, from, next) => {
  /* 路由跳转时，页面标题随路由变化——将新的页面标题修改为路由名称 */
  if (to.name) {
    document.title = to.name+' -- DOS编程俱乐部'
  }
  next()
})

 

router.beforeResolve（路由解析第8步）

和 ​​router.beforeEach​​ 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

router.afterEach（路由解析第11步）

不接受 ​​next​​ 函数也不会改变导航本身

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

局部路由守卫（路由独享守卫）

在定义路由（通常是）时，给指定路由添加守卫

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

组件内的路由守卫

在.vue文件中定义，与vue的生命周期函数同级。 

beforeRouteEnter

​​beforeRouteEnter​​ 守卫 不能 访问 ​​this​​，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },

可以通过传一个回调给 ​​next​​来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate (2.2 新增)

beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

beforeRouteLeave

beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

使用场景：通常用来禁止用户在还未保存修改前突然离开

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('修改未保存，确定离开吗?')
  if (answer) {
    next()
  } else {
    next(false)
  }
}