Vue Router 路由守卫/导航守卫

在路由跳转的整个过程中，存在一系列的钩子函数（类似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`
    // 因为当守卫执行前，组件实例还没被创建
  },

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)
  }
}