路由守卫7大触发时机全解析

Vue Router 的路由守卫是精准掌控页面导航流程的关键机制，全文系统梳理了7个核心钩子函数——从全局前置（beforeEach）、解析（beforeResolve）到后置（afterEach），再到路由独享（beforeEnter）和三大组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave），不仅清晰标注了各自触发时机、执行顺序与参数细节，更直击开发痛点：如何避免权限校验失效、重复请求、状态丢失及未保存数据误跳转。无论你是排查登录拦截异常，还是优化动态路由数据预加载，或是实现表单离开保护，这份全解析都能帮你快速定位该用哪个守卫、在何时调用 next、怎样安全处理异步逻辑——真正让导航控制既可靠又可控。

路由守卫是 Vue Router 中控制导航流程的核心机制，7 个钩子按执行顺序和作用范围可分为全局、路由独享、组件内三类。理清它们的触发时机与执行条件，能避免权限跳转异常、重复请求、状态丢失等问题。

全局前置守卫：router.beforeEach

在每次导航触发时、所有守卫中最早执行，常用于登录校验、页面加载提示、埋点统计等。它接收 to（目标路由）、from（来源路由）、next（必须调用）三个参数。

• 不调用 next() 导航会中断，页面停留在当前路由
• next() 无参：放行到 to 对应的路由
• next('/login') 或 next({ name: 'Login' })：中断当前导航，跳转到新地址
• next(false)：取消导航，URL 回滚到 from 的路径
• 异步逻辑（如 token 验证）需配合 await 或 Promise.resolve 处理

全局解析守卫：router.beforeResolve

在导航被确认前、所有组件内守卫和异步路由组件加载完成后执行。适合做数据预取、权限二次校验（比如根据路由元信息拉取角色配置后再判断是否可进）。

• 仅在导航被确认时触发（即 beforeEach 中 next() 调用后）
• 比 beforeEach 晚，比组件内守卫早
• 若在此守卫中调用 next(false) 或重定向，仍可取消导航
• 不会在 from → to 相同（仅 query 变化）时触发，除非显式配置 scrollBehavior 或使用 replace

全局后置钩子：router.afterEach

导航完成后触发，不接收 next 参数，无法改变导航结果。典型用途包括：关闭 loading、记录访问日志、更新页面标题、恢复滚动位置。

• to 和 from 是解析后的 RouteLocationNormalized 对象
• 即使导航被取消（如 beforeEach 中 next(false)），也不会触发 afterEach
• 适合副作用操作，不建议在此发请求或修改响应式状态（可能触发不必要的更新）

路由独享守卫：beforeEnter

定义在单个路由配置中的函数，只对当前路由生效。执行时机在 beforeEach 之后、beforeResolve 之前，常用于某模块的专属权限控制（如 /admin 下所有路由需管理员身份）。

• 写法：beforeEnter: (to, from, next) => { ... }
• 可接收第三个参数 from matched route record（Vue Router 4+ 支持）
• 支持数组形式写多个守卫，依次执行
• 不支持异步 setup() 内定义，只能写在 routes 配置里

组件内守卫：beforeRouteEnter

定义在组件选项中（Options API）或 setup() 中通过 defineComponent + onBeforeRouteEnter 使用（Composition API）。在组件实例创建 前 执行，此时 this / 组件实例不可访问。

• 不能直接访问 this，但可通过 next(vm => { ... }) 回调访问组件实例
• 适合做组件级数据预加载（如根据 route.params 获取详情）
• 不支持 async/await，但可在回调中 await 数据请求
• 如果路由复用（如 /user/1 → /user/2），该守卫不会再次触发

组件内守卫：beforeRouteUpdate

仅在当前路由改变、但复用同一组件时触发（如动态参数变化、query 变更）。this / 组件实例可直接访问，适合响应路由变化更新局部状态。

• 典型场景：商品详情页从 /item/100 → /item/101，复用 ItemView 组件
• 可直接调用 this.fetchData() 或 ref.value = ...
• 支持 async，可 await 新数据再更新 UI
• 不适用于路由切换导致组件销毁重建的场景

组件内守卫：beforeRouteLeave

导航离开当前组件对应路由时触发，常用于防止未保存内容被意外离开（如表单编辑页弹窗确认）。

• this 可访问，适合读取组件内部表单状态
• next(false) 可取消离开，保持当前页面；next('/login') 可重定向
• 注意：在浏览器前进/后退时也会触发，需结合 window.history.state 判断来源
• 若使用 Composition API，需在 setup 中用 onBeforeRouteLeave 注册

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~