一、全局守卫

　　顾名思义，是要定义在全局的，也就是我们index.js中的router对象。

　　1. beforeEach全局前置守卫，在路由跳转前触发，它在 每次导航 时都会触发。通过 router.beforeEach 注册一个全局前置守卫。router.beforeEach((to, from, next) => { console.log('??~ to:', to); console.log('??~ from:', from); next(); }) 参数 beforeEach 全局前置守卫接收三个参数

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

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

　　- next: Function: 一定要调用该方法不然会阻塞路由。

　　注意： next 参数可以不添加，但是一旦添加，则必须调用一次，否则路由跳转等会停止。 next()方法的几种情况

　　- next(): 进行管道中的下一个钩子。

　　- next(false): 中断当前的导航。回到 from 路由对应的地址。

　　- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址，可传递的参数与 router.push 中选项一致。

　　- next(error): 导航终止，且该错误会被传递给 router.onError() 注册过的回调。

　　2. beforeResolve全局解析守卫

在路由跳转前，所有组件内守卫和异步路由组件，被解析之后触发，它同样在每次导航时都会触发。通过router.beforeResolve注册一个全局解析守卫。router.beforeResolve((to, from, next) => { next(); }) 回调参数，返回值和 beforeEach 一样。也可以定义多个全局解析守卫。

　　3. afterEach全局后置钩子

它发生在路由跳转完成后，beforeEach和beforeResolve之后，beforeRouteEnter(组件内守卫)之前。它同样在每次导航时都会触发。通过 router.afterEach 注册一个全局后置钩子。router.afterEach((to, from) => { console.log('??~ afterEach:'); }) 这个钩子的两个参数和 beforeEach 中的 to 和 from 一样。然而和其它全局钩子不同的是，这些钩子不会接受 next 函数，也不会改变导航本身。

　　二、路由守卫

　　顾名思义，就是跟路由相关的钩子，我们的路由守卫只有一个，就是 beforeEnter。

　　beforeEnter需要在路由配置上定义beforeEnter 守卫，此守卫只在进入路由时触发，在 beforeEach 之后紧随执行，不会在params、query或hash改变时触发。

　　//index.js { path: '/a', component: () => import('../components/A.vue'), beforeEnter: (to, from) => { console.log('??~ beforeEnter '); }, }, beforeEnter 路由守卫的参数是 to、from、next ，同 beforeEach 一样。

　　三、组件守卫

　　顾名思义，是定义在路由组件内部的守卫。

　　1. beforeRouteEnter //A.vue beforeRouteEnter(to, from，next) { console.log('??~ beforeRouteEnter'); }, 路由进入组件之前调用，该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前调用。 参数包括 to，from，next。 该守卫内访问不到组件的实例，也就是 this 为 undefined，也就是他在 beforeCreate 生命周期前触发。

　　2. beforeRouteUpdate //A.vue beforeRouteUpdate(to, from) { console.log('??~ beforeRouteUpdate'); }, 对于 beforeRouteUpdate 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

　　3. beforeRouteLeave //A.vue beforeRouteLeave(to, from) { console.log('??~ beforeRouteLeave'); }, 对于 beforeRouteLeave 来说，this 已经可用了，所以给 next 传递回调就没有必要了。

　　四、总结完整的导航解析流程

　　1. 导航被触发。

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

　　3. 调用全局的beforeEach守卫。

　　4. 在重用的组件里调用beforeRouteUpdate守卫。

　　5. 在路由配置里调用beforeEnter。

　　6. 解析异步路由组件。

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

　　8. 调用全局的beforeResolve守卫。

　　9. 导航被确认。

　　10. 调用全局的afterEach 钩子。

　　11. 触发DOM 更新。

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