学习笔记Vue（二 十）—— 路由独享守卫和全局守卫以及路由导航解析过程

上一篇讲的是组件内守卫，路由还有独享守卫和全局守卫。

一、路由独享守卫

在路由配置的的时候可以设置该路径的独享守卫：

    {
      path: '/home',
      name: 'home',
      component: Home,
      //路由独享守卫
      beforeEnter(to, from, next){
          next();
      }
    },

二、路由全局守卫

全局的路由守卫有几个不同的钩子函数：
1.beforeEach((to, from, next)=>{});
全局前置守卫，
2.beforeResolve((to, from, next)=>{});
当你路由内的东西都解析完毕后执行，
3.afterEach(()=>{});
当全都解析完毕了，最后了，执行afterEach

//路由全局守卫
router.beforeEach((to, from, next)=> {
  next();
});
//当你路由内的东西都解析完毕后执行，
router.beforeResolve((to, from, next)=>{
  next();
});
//当全都解析完毕了，最后了，执行afterEach
router.afterEach(()=>{
});

路由守卫执行顺序：先全局，再独享，再组件内，再resolve，最后afterEach

官网上的导航解析流程：

完整的导航解析流程

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