目录

一、vue-router 的导航守卫的作用

二、vue-router 提供的导航守卫的方式

1、全局的

（1）、全局前置守卫

（2）、全局解析守卫

（3）、全局后置钩子

2、单个路由独享的

3、组件级的

三、vue-router 完整的导航解析流程

一、vue-router 的导航守卫的作用

vue-router 的导航守卫的作用：用来通过跳转或取消的方式守卫导。

二、vue-router 提供的导航守卫的方式

vue-router 提供的导航守卫的方式有 3 种：

• 全局的
• 单个路由独享的
• 组件级的

参数或查询的改变并不会触发进入/离开的导航守卫！

1、全局的

（1）、全局前置守卫

（2）、全局解析守卫

（3）、全局后置钩子

2、单个路由独享的

3、组件级的

三、vue-router 完整的导航解析流程

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