Vue路由

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第八天，点击查看活动详情 >>

路由的钩子函数几种

Vue路由钩子可以分为3类 ：1.全局钩子 2.单个路由里面的钩子 3.组件路由

1.全局的路由钩子函数有2个

beforeEach(全局前置钩子)是页面加载之前的 有3个参数 ，to:route要去的目标 from:从哪里来: next：放行

afterEach(全局后置钩子)是在页面加载之后的，这些钩子是不会接受next函数，也不会改变导航本身

2. 单个路由内的钩子函数

beforeEnter 可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的

3.组件内的路由钩子函数

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。