vue-router 导航守卫

导航守卫

• 导航守卫即是在路由跳转的时候，根据vue-router提供的导航守卫主要用来通过跳转或取消
• 参数或查询的改变并不会出触发进入/离开的导航守卫

完整的导航解析流程

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的回调函数。

    • 路由调用，首先会离开原来的路由，触发路由离开钩子，然后会在全局里调用beforeEach，然后会在当前去更新路由beforeRouteEnter,进入路由beforeEnter,调用路由beforeRouteEnter,确认路由beforeResolve,调用全局afterEach,

全局守卫

• 全局前置守卫

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

• to： route: 即将要进入的目标路由对象
• from: router: 当前导航正要离开的路由
• next: function,
  
  • next() 进行管道中的下一个钩子
  • next(false) 中断当前的导航。如果是浏览器的url改变了，那么url地址会重置from路由对应的地址
  • next(‘/’)或者next({path: ‘/’}) 跳转到一个不同的地址，原来的跳转中断
  • next(error):(2.4+)，参数是一个eoor实例，导航终止，错误传递给router.onError()的回调

全局解析守卫(2.5+)

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

全局后置钩子

• 可以注册全局后置钩子，但是和守卫不同的是，这些钩子不会接受next函数，不会改变导航本身

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

路由独享的守卫

• 可以在路由配置上直接定义beforeEnter守卫

  routes:[
      {
          path: '/foo',
          componet: Foo,
          beforeEnter: (to, from, next) => {
              // ...
          }
      }
  ]
  

组件内的守卫

beforeRouteEnter
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
  虽然无法直接获取组件实力
  但是我们可以通过next参数的回调函数获取到当前实例进行操作
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      //vm就是当前组件实例
    });
  }

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

beforeRouteLeave
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`