异步组件加载完成前路由守卫不能直接放行，需在beforeEach中await组件import() Promise解析后再next()；推荐用resolveComponent预加载、Suspense兜底、Map缓存已加载组件，并注意SSR场景下的服务端兼容处理。
异步组件加载完成前，路由守卫不能直接放行跳转，否则可能触发白屏或报错。核心思路是：在 beforeEach 守卫中主动等待组件的 import() Promise 解析完毕，再调用 next()。
用 resolveComponent 预加载组件（推荐）
Vue 3 的 resolveComponent 可配合 defineAsyncComponent 提前触发加载逻辑，但不立即渲染。适合在守卫中做“预热”：
- 在路由配置里给异步组件加个唯一标识（如 name 或 meta.id）
- 守卫中根据 to.matched 路径匹配到目标组件，调用其 import() 函数
- await 加载完成后再 next()，确保 setup() 执行前资源就位
示例：
const routes = [{ path: '/admin', component: () => import('@/views/Admin.vue'), meta: { preload: true } }
];
守卫内判断：
router.beforeEach(async (to, from, next) => {if (to.meta.preload && to.matched[0]?.component) {
try {
await to.matched[0].component(); // 触发 import
next();
} catch (err) {
next('/error'); // 加载失败降级
}
} else {
next();
}
});
配合 Suspense + 错误边界更稳健
仅靠守卫预加载还不够——网络抖动、CDN 故障仍可能导致组件加载失败。建议组合使用：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 路由组件外层套 <Suspense>，提供 fallback UI（如 loading 动画）
- 在 @error 或 onErrorCaptured 中捕获组件加载异常
- 错误时调用 router.replace() 跳转到兜底页，避免卡在空白
这样即使守卫没完全兜住，UI 层仍有容错能力。
避免重复加载与缓存优化
每次跳转都重新 import() 会浪费带宽。可手动缓存已加载的组件：
- 用 Map 存储路径 → 组件 Promise 映射
- 守卫中先查缓存，命中则 await 已解析的 Promise
- 注意清除缓存的时机（如用户登出、版本更新后）
简单缓存示意：
const loadedComponents = new Map();router.beforeEach(async (to, from, next) => {
const loader = to.matched[0]?.component;
if (!loader) return next();
let compPromise = loadedComponents.get(to.path);
if (!compPromise) {
compPromise = loader();
loadedComponents.set(to.path, compPromise);
}
await compPromise;
next();
});
服务端渲染（SSR）需额外处理
在 Nuxt 或 Vue SSR 场景下，beforeEach 在服务端执行时无法 await 前端 import()。此时应：
- 改用 asyncData 或 useAsyncData（Nuxt）预取组件依赖
- 或在客户端激活后，用 onMounted + router.isReady() 补充校验
- 服务端优先返回骨架屏，避免阻塞首屏
不复杂但容易忽略。关键就是把组件加载变成守卫流程中的一个可等待环节，而不是交由渲染阶段被动触发。
