Vue Router导航守卫按严格顺序执行：beforeRouteLeave→beforeEach→beforeRouteUpdate→beforeEnter→异步组件加载→beforeRouteEnter→beforeResolve→afterEach；三类守卫分工明确，全局守卫统一处理、路由独享守卫精准控制、组件内守卫关联生命周期。

Vue Router 的导航守卫不是随意触发的，而是一条严格编排的异步流水线。理解执行顺序，是写出可靠权限控制、数据预加载和防误退逻辑的前提。

完整执行流程（标准跳转场景）

当用户从 /home 跳转到 /profile 这类「组件不复用」的路由时，守卫按以下固定顺序依次执行：

• 失活组件的 beforeRouteLeave（如果当前组件定义了该守卫）
• 全局前置守卫 router.beforeEach
• 重用组件的 beforeRouteUpdate（仅当目标路由复用当前组件时才触发）
• 目标路由的 beforeEnter（即路由独享守卫）
• 异步组件加载（resolveAsyncComponents，如 import() 动态导入）
• 激活组件的 beforeRouteEnter（此时组件实例尚未创建）
• 全局解析守卫 router.beforeResolve
• 全局后置钩子 router.afterEach（导航确认后立即执行，无 next）

三类守卫的分工与典型用途

全局守卫：作用于所有跳转，适合统一逻辑

• beforeEach：登录校验、权限拦截、埋点准备
• beforeResolve：确保关键数据/异步组件已就绪再渲染（例如等待接口返回后才展示页面）
• afterEach：更新页面标题、关闭 loading、上报 PV

路由独享守卫：beforeEnter 写在单个路由配置中，只对该路径生效

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 避免在全局守卫里写大量 if (to.path === '...') 判断
• 常用于角色专属页（如 /admin 只允许 admin 访问）

组件内守卫：绑定在组件选项或 setup 中，与组件生命周期强关联

• beforeRouteEnter：不能访问 this，但可通过 next(vm => {...}) 获取实例
• beforeRouteUpdate：参数变化但组件复用时触发（如 /user/1 → /user/2）
• beforeRouteLeave：离开前拦截，适合表单未保存提示

关键细节与常见陷阱

执行顺序不是靠记忆，而是由源码中 runQueue 递归调度保证的。几个必须注意的点：

• beforeRouteEnter 是唯一无法直接访问组件实例的守卫，因为组件还没挂载
• beforeEach 和 beforeResolve 都支持 async/await，天然等待 Promise 完成
• next() 必须且只能调用一次；重复调用或遗漏会导致导航卡死
• Vue Router 4+ 推荐用 返回值方式 替代 next（如 return '/login'），更简洁安全
• 导航被取消（next(false) 或返回 false）时，URL 会回滚到 from 对应地址

一个真实跳转的控制台输出示例

从 / 进入 /profile，假设三者都存在守卫：

beforeRouteLeave（Home 组件）
全局 beforeEach
路由 beforeEnter（Profile 路由）
beforeRouteEnter（Profile 组件）
全局 beforeResolve
全局 afterEach