vue-router路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航分为：全局的，单个路由独享的和组件级的。

一、全局路由守卫
1、全局前置守卫 beforeEach
在全局前置守卫中，我们可以访问到即将要进入的路由对象 to，以及当前的路由对象 from。另外，还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象，则会跳转到该路由。如果不调用 next 函数，则当前路由不会发生变化。
2、全局解析守卫 beforeResolve
全局解析守卫是在路由解析之前进行拦截和控制的，它会在所有全局前置守卫 resolve 完成之后被调用
3、全局后置守卫 afterEach
全局后置守卫会在每次路由跳转结束后被调用，无论是正常跳转还是取消跳转，afterEach 钩子不像其他路由钩子一样，不能通过调用 next 函数来控制路由的跳转行为，因为此时路由跳转已经结束了。如果在 afterEach 钩子中调用 next 函数，则会抛出一个错误。
二、路由独享守卫 beforeEnter
路由独享守卫是针对某个具体的路由实例进行拦截和控制，beforeEnter 守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发
三，组件内的守卫
1、beforeRouteEnter：在路由进入该组件之前被调用

2、beforeRouteUpdate：在路由更新该组件时被调用

3、 beforeRouteLeave：在路由离开该组件时被调用

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，此时新组件还没被创建，通过传一个回调给 next 来访问组件实例，在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。beforeRouteEnter 是支持给 next 传递回调的唯一守卫，对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调。

完整的导航解析流程

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