Vue中的路由守卫

全局守卫

全局前置守卫

使用 router.beforeEach 注册一个全局前置守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
  //可以进行一些判断 进入不同页面，比如判断是否登录
})

to: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

router.beforeEach((to, from, next) => {
  // ...
  //可以进行一些判断 进入不同页面，比如判断是否登录
})

next() 跳转到本来要求去的地址
next('指定地址') 或next({ path: '指定地址' }) 跳转到到指定地址。next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

router.beforeEach((to, from, next) => {
  // token
  if(to.path !== '/login' && token){
    next()
  }else{
  	next('/login')
  }
  //此处再放一个next()钩子永远都不会被解析或报错
  //next()
})

注意：确保 next 函数在任何给定的导航守卫中都被严格调用一次

全局解析守卫

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

全局后置钩子

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

路由独享的守卫

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

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫

beforeRouteEnter

1. 在渲染该组件的对应路由被 confirm 前调用
2. 不！能！获取组件实例 this
3. 因为当守卫执行前，组件实例还没被创建

beforeRouteEnter(to, from, next) {},

beforeRouteUpdate (2.2 新增)

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

 beforeRouteUpdate(to, from, next) {}

beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调（next()），因为没有必要了。

beforeRouteLeave

1.导航离开该组件的对应路由时调用
2.可以访问组件实例 this

  beforeRouteLeave(to, from, next) {}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

完整的导航解析流程

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 的回调函数，创建好的组件实例会作为回调函数的参数传入。
    参照官方文档：https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB