Vue路由守卫分全局、路由独享和组件内三类，按顺序执行：全局beforeEach→路由beforeEnter→组件beforeRouteEnter→全局beforeResolve→afterEach；需正确调用next()控制导航。

Vue 路由守卫的核心在于“在哪拦截、拦什么、怎么拦”。全局配置管所有路由，局部配置只盯特定页面或组件，两者不是替代关系，而是分工协作——该统一处理的放全局，需精细控制的放局部。

全局守卫：项目级统一拦截

适用于登录校验、权限兜底、埋点统计等全站通用逻辑。必须在路由实例创建后立即注册，且只写一次。

• beforeEach：跳转前触发，最常用。必须调用 next()（放行）、next('/login')（重定向）或 next(false)（取消导航），否则路由会卡住
• beforeResolve：所有异步组件和组件内守卫执行完后触发，适合等待关键数据加载完成再跳转
• afterEach：跳转完成后触发，无 next 参数，适合改标题、发日志、清 loading 状态等副作用操作

路由独享守卫：单个路由精准控制

写在具体路由配置项中，只对该路由生效，避免全局守卫里堆砌大量 if (to.path === 'xxx') 判断。

• 使用 beforeEnter 字段，参数与 beforeEach 完全一致
• 适合场景：后台管理页角色校验、详情页 ID 格式校验、付费页面支付状态检查
• 注意：它不会被子路由继承，父子路由需各自配置

组件内守卫：与页面逻辑强绑定

直接写在组件选项中，生命周期清晰，适合处理组件专属行为。

vue-component-analyzer

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

下载

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

• beforeRouteEnter：进入组件前触发，此时组件实例尚未创建，无法访问 this，但可通过 next(vm => {...}) 访问实例
• beforeRouteUpdate：同一组件复用时（如 /user/1 → /user/2），仅参数变化触发，适合重新拉取数据
• beforeRouteLeave：离开组件前触发，常用于表单未保存提示，调用 next(false) 可阻止跳转

配置顺序与执行优先级

一次完整导航中，守卫按以下顺序依次执行：

• 全局 beforeEach
• 路由独享 beforeEnter
• 组件内 beforeRouteEnter
• 全局 beforeResolve
• 全局 afterEach

任一守卫返回 false 或重定向，后续守卫将不再执行。多个同类型守卫（如多个 beforeEach）按注册顺序依次执行。