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

最新推荐文章于 2024-09-21 17:30:00 发布

A青火

最新推荐文章于 2024-09-21 17:30:00 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.csdn.net/qq_34006340/article/details/130525520

该文详细阐述了Vue.js应用中路由导航的完整流程，包括触发导航、执行各种守卫方法（如beforeRouteLeave、beforeRouteUpdate、beforeEnter）、组件的重用与更新、全局钩子函数的调用，以及DOM更新和组件实例创建等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整的导航解析流程

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