嵌套路由守卫执行顺序为:beforerouteleave→beforeeach→beforeenter(父→子→孙)→beforerouteenter(父→子→孙)→aftereach;全局守卫最先且统一拦截,路由独享守卫按路径匹配逐级触发,组件内守卫依挂载/卸载顺序执行。

嵌套路由中父子路由守卫的执行顺序不是随意的,而是由 Vue Router 严格定义的一套流水线机制决定的。理解这个顺序,才能避免权限校验漏掉、数据预加载失效或动画错乱等问题。
全局守卫最先介入,但不区分嵌套层级
无论目标路由是否嵌套,router.beforeEach 总是第一个被触发的守卫。它对所有导航统一拦截,适合做登录态检查、全局权限兜底(比如 token 过期跳转)。它的执行不依赖于具体路由结构,因此在嵌套路由场景下,它仍按常规逻辑运行——只管“去哪”,不管“嵌了几层”。
路由独享守卫(beforeEnter)按匹配路径逐级触发
当导航命中某个嵌套路由配置时,Vue Router 会从最外层父路由开始,沿着 path 匹配链 向下遍历,对每一个匹配上的路由记录依次执行其 beforeEnter。例如:
-
/admin(父路由)→ 触发其beforeEnter -
/admin/user(子路由)→ 再触发其beforeEnter -
/admin/user/detail(孙路由)→ 最后触发其beforeEnter
这意味着你可以把粗粒度权限(如“是否为 admin 角色”)放在父路由守卫里,细粒度操作权限(如“能否查看用户详情”)放在子路由守卫里,形成分层控制。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
组件内守卫(beforeRouteEnter / beforeRouteLeave)只作用于当前活跃组件
这类守卫绑定在组件内部,只在该组件被导航进入或离开时触发,与嵌套结构无关。但要注意:嵌套路由中,多个组件可能同时激活(比如父组件 + 子组件都渲染),它们各自的 beforeRouteEnter 会按组件挂载顺序执行(通常是父先于子),而 beforeRouteLeave 则按卸载顺序(子先于父)。
典型用途包括:
- 父组件:检查整体页面是否允许离开(如表单未保存)
- 子组件:加载局部数据或初始化子模块状态
执行顺序总结:从外到内、由总到分
一次完整嵌套路由跳转(如从 /home → /admin/user/detail)的守卫触发顺序为:
其中 beforeResolve 会在所有组件内守卫和异步组件加载完成后、实际渲染前触发,适合做最终数据确认;afterEach 则纯属收尾动作,无 next 参数,不可中断导航。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!









