vue的路由守卫

vue的路由守卫

1.前置路由

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。言下之意就是当vue route方式改变时，就会触发路由守卫进行回调一些相关的回调函数。

//前置守卫
//to: Route: 即将要进入的目标 路由对象
//from: Route: 当前导航正要离开的路由
//next: Function: 一定要调用该方法来 resolve 这个钩子。
router.beforeEach((to, from, next) => {
  //通过beforeEach，可以将路跳转前的一些路由信息继续保存
  // 如：将当前路由信息保存到data中的path去
    this.path = this.$route.path
    next();
})

activated(){
    //通过添加activated周期函数，可以将保存的路由继续读出
    //这样用户回退到上一页，页面还可以保存之前用户浏览的状态了
    this.$router.push(this.path)
}

当然要保存信息，当然要确保路由对应的组件在路由跳转时不会被销毁，所以要把组件组件状态缓存下来，这个可以通过keep-alive来实现

<keep-alive></keep-alive>

2.后置钩子

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

router.afterEach((to, from) => {
  // 路由跳转后想干的事情
})

还有很多其他的守卫，这里就不一一列出了，详细看页面最下方的官方的路由守卫页信息。

3.守卫的位置

守卫又分全局的, 单个路由独享的, 或者组件级的，这个很简单，只有确定守卫位置，就能知道守卫的作用域了。

全局

const router = new VueRouter({ ... })
//全局就是写在外面
router.beforeEach((to, from, next) => {
  // ...
})

路由独享

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      //写在routes里面的，就是该路由独享
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内

const Foo = {
  template: `...`,
  //写在组件里面的，就是该组件独享
  beforeRouteEnter (to, from, next) {
    //...
  }
}

4.完整的导航解析流程

这个是官方给出的导航解析流程，这里描述了守卫触发的顺序。

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

5.详细解释

这里给出官方文档的位置：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html