Vue2.x路由守卫（路由钩子）详解

路由守卫

vue-router 提供的路由守卫主要用来通过跳转或取消的方式守卫路由，比如符合什么条件才可以进入路由，否则取消跳转，或者控制跳转路径，路由跳转成功过后需要做什么操作等等都可以使用路由守卫（路由钩子）实现，常用来做登录验证

路由守卫分类

全局守卫（全局前置守卫，全局解析守卫，全局后置钩子）
路由独享守卫
组件守卫

全局前置守卫

全局的守卫定义在main.js中
使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

方法接收三个参数：

• to: 即将要进入的目标 路由对象
• from: 当前导航正要离开的路由 路由对象
• next : Function:确保要调用 next()，否则钩子就不会被 resolved。

next的几种使用：

• next()进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
• next(false): 中断当前导航
• next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个新的地址。
• next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

全局解析守卫（2.5.0 新增）

使用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

const router = new VueRouter({ ... })
router.beforeResolve ((to, from, next) => {
  // ...
})

全局后置钩子

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

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

路由独享守卫

在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 参数与全局前置守卫一致
      }
    }
  ]
})

组件守卫

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

export default {
  name: "routerGuard",
  data() {
       return {}
   },
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取this，因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用，可以访问this
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用，可以访问this
  }
}

完整的导航解析流程

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

参考官网：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html