Vue路由守卫

完整的导航解析流程:

  1.导航被触发。

  2.在失活的组件里调用 beforeRouteLeave 守卫。

        a.如果页面中有重要的信息需要用户保存后才能进行跳转，可以在这里拦截给出提示信息。

        b.当开启组件缓存的时候是不会触发 destroy 等销毁的生命周期钩子函数，也就无法在组件销毁的时候做一些清理工作(比如清除定时器);这种情况如果想要让页面离开的时候做清理则可以借助这个导航守卫。

   3.调用全局的 beforeEach 守卫。

        a.开始加载动画

        b.校验页面访问权限

  4.在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。

        a.路由参数改变时触发这个钩子，例如从 /fo0/1 和 /f0/2 之间跳转的时候需要重新求数据，这种类型的跳转不会发 reated 生命周期函数，可以通过该钩子函数或者监听 $route 来实现。

  5.在路由配置里调用 beforeEnter

  6.解析异步路由组件。

  7.在被激活的组件里调用 beforeRouteEnter。

  8.调用全局的 beforeResolve 守卫(2.5+)。

  9.导航被确认。

  10.调用全局的 afterEach 钩子。

        a.结束加载动画

  11.触发 DOM 更新。

  12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入

# 语法
## 1.路由：1.全局守卫 beforeEach
// to: 要去哪里
// from: 从哪里来
// next: 允许通过
// 全局守卫
// 任何页面的展示都需要经过全局守卫
router.beforeEach((to, from, next) => {
  console.log('1.全局守卫 beforeEach')
  // 这里通常用来做一些统一的导航逻辑处理，比如判断用户的登录状态，判断用户对页面的访问权限等操作
  next()
})
## 2.路由：路由独享的守卫：导航已经完成进入当前页面中了 beforeEnter
 {
      path: '/',
      name: 'Home',
      component: Home,
      // 5.路由独享的守卫：导航已经完成进入当前页面中了
      beforeEnter (to, from, next) {
      console.log('2.路由独享的守卫：导航已经完成进入当前页面中了 beforeEnter')
      next()
      }
}
## 3.在被激活的组件里调用 beforeRouteEnter
  // 3.在被激活的组件里调用 beforeRouteEnter 不能访问this实例
  beforeRouteEnter (to, from, next) {
    console.log('3.在被激活的组件里调用 About beforeRouteEnter')
    next()
  },
## 4.全局被解析之后 beforeResolve
// 这和 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
router.beforeResolve((to, from, next) => {
  console.log('4.全局被解析之后 beforeResolve')
  next()
})
## 5.全局导航完成 afterEach
// 执行到这里已经完成导航所以不需要next
// 这里做不了拦截处理
router.afterEach((to, from) => {
  console.log('5.全局导航完成 afterEach')
})
## 6.组件内离开组件调用 beforeRouteLeave
  // 已停用组件中的呼叫防护 离开组件调用
  beforeRouteLeave (to, from, next) {
    console.log('6.组件内离开组件调用 beforeRouteLeave')
    next()
  }
## 7.组件被复用时调用 beforeRouteUpdate
  // 在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate (to, from, next) {
    console.log('组件被复用时调用 beforeRouteUpdate')
    next()
  }

执行顺序
## 切换路由
## 1.路由：全局守卫 router.beforeEach
## 2.路由：独享的守卫 beforeEnter
## 3.组件：在被激活的组件里调用 beforeRouteEnter
## 4.路由：全局被解析之后 beforeResolve
## 5.路由：全局导航完成 afterEach
## 6.组件：组件内离开组件调用 beforeRouteLeave
## 7.组件：组件被复用时调用About beforeRouteUpdate

详情请参考官网：Navigation Guards | Vue Router