【vue高频面试题—路由篇】：vue router 路由导航守卫的执行顺序 和 组件内的生命周期的执行顺序 综合执行顺序是怎样的

综合执行顺序

假设从 A 路由 导航到 B 路由，以下是完整的执行顺序：

1. 从 A 路由离开

1. router.beforeEach（全局前置守卫）

2. beforeRouteLeave（组件内守卫，A 路由对应组件中）

3. 销毁 A 路由的组件

   • beforeUnmount
   • unmounted

---

2. 导航到 B 路由

4. beforeEnter（路由独享守卫，B 路由）
5. beforeRouteEnter（组件内守卫，B 路由对应组件中）
6. 异步组件加载完成后，触发 router.beforeResolve（全局解析守卫）

---

3. 渲染 B 路由组件

7. 组件生命周期钩子

   • beforeCreate
   • created
   • beforeMount
   • mounted

---

4. 导航完成

8. router.afterEach（全局后置守卫）

---

特殊情况：复用组件时（动态路由参数变化）

如果目标路由复用当前组件（例如，从 /user/1 导航到 /user/2）：

1. 不会触发组件销毁生命周期钩子。

2. 会触发：

   • beforeRouteUpdate（组件内守卫）
   • beforeUpdate
   • updated

---

总结：

阶段	执行顺序	触发位置
离开当前路由	beforeEach	全局
	beforeRouteLeave	当前路由组件内
	beforeUnmount → unmounted	当前路由组件
进入目标路由	beforeEnter	路由独享
	beforeRouteEnter	目标路由组件内
	beforeResolve	全局
渲染目标组件	beforeCreate → created	目标路由组件
	beforeMount → mounted	目标路由组件
完成导航	afterEach	全局