vue学习笔记之路由守卫触发流程梳理

路由守卫触发流程梳理

路由守卫概括来说可以分为全局路由守卫、路由独享守卫和组件内路由守卫。本次笔记将梳理一下当路由发生改变时各个路由钩子触发的顺序，帮助更好的理解路由机制。
路由触发的流程我分为了两类：

1. 一类是不同组件（组件A跳转到组件B）的路由跳转流程。
2. 另一类是复用组件的路由跳转流程（组件A包含动态路由参数，只改变组件A的动态路由参数触发的路由跳转流程，示例： name/:id, 只改变id的值来触发路由跳转）。

不同组件之间的路由跳转流程图

Created with Raphaël 2.2.0 导航被触发 触发组件A组件内路由守卫beforeRouteLeave 触发全局路由前置守卫beforeEach 触发组件B路由独享守卫beforeEnter 解析组件B 触发组件B的组件内路由守卫beforeRouteEnter 触发全局路由解析守卫beforeResolve 导航被确认 触发全局路由钩子afterEach 渲染DOM

1. 导航被触发（A–>B）
2. 调用A组件内路由守卫beforeRouteLeave(to,from,next)
3. 调用全局路由前置守卫router.beforeEach(to,from,next)
4. 调用B路由独享守卫 beforeEnter(to,from.next)
5. 解析异步路由组件B
6. 调用B的组件内路由守卫beforeRouteEnter(to,from,next)
7. 调用全局路由解析守卫 router.beforeResolve(to,from,next)
8. 导航被确认
9. 调用全局路由钩子router.afterEach(to,from)
10. 渲染B组件DOM

复用组件的路由跳转流程图

Created with Raphaël 2.2.0 导航被触发 触发全局路由前置守卫beforeEach 触发复用组件的组件内路由守卫beforeRouteUpdate 触发全局路由解析守卫beforeResolve 导航被确认 触发全局路由钩子afterEach 更新DOM

1. 导航被触发（改变动态路由参数）
2. 调用全局路由前置守卫 router.beforeEach(to,from,next)
3. 调用复用组件的组件内路由守卫 beforeRouteUpdate(to,from,next)
4. 调用全局路由解析守卫router.beforeResolve(to,from,next)
5. 导航被确认
6. 调用全局路由钩子 router,afterEach(to,from)
7. 更新DOM

DEMO下载地址： https://github.com/fireworksAug/practice.git