Vue Router 钩子函数与组件生命周期执行顺序详解

Vue Router 钩子函数与组件生命周期执行顺序详解

一、Vue Router 核心钩子函数分类

Vue Router 提供了三类路由守卫（钩子函数），用于控制导航流程：

1. 全局守卫

• router.beforeEach(to, from, next)：全局前置守卫，导航触发前全局执行（所有路由跳转都会触发）
• router.beforeResolve(to, from, next)：全局解析守卫，所有组件内守卫和异步路由组件加载完成后执行
• router.afterEach(to, from)：全局后置钩子，导航完成后执行（无 next 参数，不影响导航流程）

2. 路由独享守卫

• beforeEnter(to, from, next)：配置在路由对象中的守卫，仅当进入该路由时触发（优先级高于组件内守卫）

3. 组件内守卫

• beforeRouteEnter(to, from, next)：进入当前组件对应路由前触发（此时组件实例未创建，无法访问 this）
• beforeRouteUpdate(to, from, next)：当前组件路由参数变化时触发（如从 /user/123 跳转到 /user/456）
• beforeRouteLeave(to, from, next)：离开当前组件对应路由前触发（常用于阻止用户未保存时离开）

二、Vue 组件生命周期钩子（关键阶段）

组件生命周期与路由导航强相关的钩子如下（按执行顺序）：

• beforeCreate：实例初始化前（数据观测和事件配置之前）
• created：实例初始化完成（数据观测和事件配置完成，未挂载 DOM）
• beforeMount：挂载开始前（$el 为虚拟 DOM）
• mounted：挂载完成（真实 DOM 渲染完毕）
• beforeUpdate：数据更新前（虚拟 DOM 重新渲染前）
• updated：数据更新后（虚拟 DOM 重新渲染完成）
• beforeUnmount：实例卸载前（清理定时器、事件监听器等）
• unmounted：实例卸载完成（所有子组件已卸载）

三、完整执行顺序流程（场景化说明）

场景 1：首次进入新路由（从 A 路由跳转到 B 路由，B 组件未加载过）

执行顺序：

1. 全局前置守卫 router.beforeEach（导航开始）
2. 路由独享守卫 B路由.beforeEnter（若配置）
3. 组件内守卫 B组件.beforeRouteEnter（进入 B 前）
4. 解析守卫 router.beforeResolve（B 组件及依赖加载完成）
5. 全局后置钩子 router.afterEach（导航完成）
6. B 组件生命周期：beforeCreate → created → beforeMount → mounted（组件挂载）

场景 2：路由更新（当前组件不变，参数变化，如 /user/123 → /user/456）

执行顺序：

1. 全局前置守卫 router.beforeEach（导航开始）
2. 路由独享守卫 当前路由.beforeEnter（若配置）
3. 组件内守卫 当前组件.beforeRouteUpdate（参数变化时）
4. 解析守卫 router.beforeResolve（确认导航）
5. 全局后置钩子 router.afterEach（导航完成）
6. 组件生命周期：beforeUpdate → updated（组件更新）

场景 3：离开当前路由（从 B 路由跳转到 C 路由）

执行顺序：

1. 组件内守卫 B组件.beforeRouteLeave（离开 B 前，常用于阻止未保存操作）
2. 全局前置守卫 router.beforeEach（导航开始）
3. C 路由相关守卫（重复场景 1 流程）
4. B 组件生命周期：beforeUnmount → unmounted（B 组件卸载）

四、总结表格