beforeresolve 是 vue router 3.1+ 的全局守卫,在所有组件内守卫执行完毕、异步组件加载完成后触发,用于权限校验、数据预取和元信息注入;它比 beforeeach 晚、比 aftereach 早,不可在组件复用时触发,vue router 4 中已被移除。

beforeResolve 是 Vue Router 3.1+ 引入的导航守卫,用于在路由确认前、组件内守卫(如 beforeRouteEnter)执行完毕后,对即将渲染的路由进行最终校验或数据预取。它不取代 beforeEach,而是补充其能力边界——beforeEach 在路由匹配阶段就介入,而 beforeResolve 等待异步组件加载完成、所有组件内守卫执行结束才触发。
执行时机:比 beforeEach 晚,比 afterEach 早
一次完整导航中,守卫按如下顺序执行:
-
beforeEach:全局前置守卫,在路由解析开始时立即执行(此时组件尚未加载,to.matched已知,但组件可能还是异步函数) -
beforeRouteEnter/beforeRouteUpdate:对应目标/复用组件内的守卫(若存在),在组件异步加载完成后调用 -
beforeResolve:全局守卫,在所有组件内守卫都 resolve 后执行;此时to.matched对应的组件已加载完毕,to.meta和组件内逻辑均已就绪 -
afterEach:导航成功后执行(无 next,不可取消导航)
典型使用场景:依赖组件就绪的校验与预取
当你需要基于组件实际结构(比如组件定义的 meta.requiresAuth 或 asyncData 方法)做判断时,beforeResolve 才是可靠选择:
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
-
权限兜底检查:组件内未处理权限,但你希望统一拦截未登录用户访问含
meta.requiresAuth: true的路由(此时组件已加载,to.matched.some(...)可安全读取全部 meta) -
页面级数据预加载:调用
to.matched[0].components.default.asyncData?.(to),确保数据在组件挂载前就绪(避免组件内重复请求或闪烁) -
动态 title / SEO 元信息注入:读取组件
head()或metaInfo配置并提前设置,而非等组件 mounted
与 beforeEach 的关键区别:能否访问组件实例?
beforeEach 中无法保证组件已加载,因此:
- 不能安全调用
to.matched[i].components.default.asyncData(可能仍是 Promise 或 undefined) - 不能依赖组件导出的静态属性(如
title、description),因为模块尚未import()完成 -
beforeResolve则可放心遍历to.matched,每个routeRecord.components都已解析为真实构造函数或选项对象
注意事项:不是万能钩子,慎用副作用
beforeResolve 虽强大,但需注意:
- 它不会在组件复用时触发(例如从 /user/1 → /user/2,若用同一组件,则跳过该守卫)
- 若在其中抛出错误或调用
next(false),导航会被取消,且不会进入afterEach - 避免在此处执行耗时同步操作(如大量计算),会阻塞渲染;异步操作建议用
next()回调控制流程 - Vue Router 4(Composition API)中已移除
beforeResolve,改用router.beforeEach+resolveComponent或onBeforeRouteUpdate替代逻辑










