vue router 导航守卫生命周期

导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。）

具体有哪些？

router.beforeEach((to, from, next) => {             //全局前置守卫
router.beforeResolve((to, from, next) => {          //全局解析守卫
router.afterEach((to, from) => {                    //全局后置钩子

beforeEnter: (to, from, next) => {                  //路由独享守卫，在route里定义。

beforeRouteEnter (to, from, next) {                 //组件内定义守卫
beforeRouteUpdate (to, from, next) {                //组件内定义守卫
beforeRouteLeave (to, from, next) {                 //组件内定义守卫

router.onReady(callback, [errorCallback]) //在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。

注意：

1、这些守卫都是中间件模式，，，可以定义多个，按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

2、什么时候结束？ 在上述函数参数中，大部分都有一个 next() ，若最后一个 next 被调用了， 那么，则导航的状态就是confirmed(确认的)。

3、被确认后 要调用哪个？ onReady()函数。

4、beforeResolve 是在 被确认的 前一刻 调用。（区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。）

5、上面 大部分守卫 都无法访问到 vm 实例的。有三个组件内的守卫，其中两个可以访问到vm实例。

6、在整个路由流程中，完成离开流程后，，，最后一步是哪个？

最后一个是组件内的 beforeRouteEnter 这个守卫，，，到这里时，组件实例还未创建，不能访问 this，此时开始组件生命周期，完了后把组件 this 传递 给 beforeRouteEnter 的next 回调。结束。

完整的导航解析流程

• 导航被触发。
• 在失活的组件里调用离开守卫。
• 调用全局的 beforeEach 守卫。
• 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
• 在路由配置里调用 beforeEnter。
• 解析异步路由组件。若有，先下载异步组建。
• 在被激活的组件里调用 beforeRouteEnter。
• 调用全局的 beforeResolve 守卫 (2.5+)。
• 导航被确认。调用全局的 afterEach 钩子。再调用onReady（仅首次加载页面完响应，以后切路由都不会）。
• 非重用组件，开始组件实例的生命周期 beforeCreate,created,beforeMount,mounted
• 触发 DOM 更新。
• 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

.