Vue动态路由加载失败需分层拦截：路由层用import().catch()降级、router.onError捕获底层异常、defineAsyncComponent配置errorComponent与timeout，并配合Suspense提供可感知可恢复的UI反馈。
Vue 动态路由加载失败时，不能只靠用户刷新或静默失败——白屏、控制台报错、导航中断是典型表现。关键在于分层拦截：在路由定义阶段捕获、在框架层兜底、在 UI 层反馈，形成可感知、可恢复、可追踪的降级链。
路由配置中用 import().catch() 主动降级
这是最前置、最有效的防线。Vue Router 不会自动处理动态导入失败，必须在 route 的 component 字段里显式包裹错误逻辑：
- 直接在路由对象中写：
component: () => import('./views/UserDetail.vue').catch(() => import('./components/NotFound.vue')) - 兜底组件必须轻量（不带异步请求、不依赖外部状态），确保自身一定能加载成功
- 避免在
beforeEach守卫中尝试拦截——此时 import 尚未执行，守卫无法捕获 Promise 拒绝态
用 router.onError 捕获未覆盖的底层异常
当某个路由漏掉 catch，或 chunk 加载阶段出问题（如 CDN 返回 404、网络中断、500 错误），router.onError 是最后一道屏障：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 必须在
createRouter()之后、app.use(router)之前注册，否则无效 - 检查
error.message是否含"Loading chunk"、"Failed to fetch"、"500"等关键词，区分失败类型 - 推荐跳转至统一错误页，例如
router.push('/error?reason=chunk-404')，便于前端埋点与后端日志关联
结合 defineAsyncComponent 提供 UI 层反馈
路由兜底解决的是“跳哪去”，但用户需要知道“为什么卡住”。在目标组件内部使用 defineAsyncComponent 可增强体验：
立即学习“前端免费学习笔记（深入）”；
- 配置
errorComponent显示友好提示（如“内容加载失败，请重试”） - 设
timeout: 10000（10 秒），避免过短误判、过长干等；delay: 200防止快速加载时 loading 闪现 - 配合 Suspense 的
#fallback插槽，让 loading 和 error 状态切换更自然
服务端与构建协同减少失败源头
前端兜底是体验优化，真正降低失败率要从部署和构建入手：
- 确保 Vite/Webpack 输出的 chunk 名称和路径，与 Nginx 或 CDN 配置的静态资源路径严格一致，避免 404
- Nginx 可配置
try_files $uri /index.html，对所有 JS 请求兜底返回主包，防止 chunk 丢失导致白屏 - 灰度发布时，服务端可通过 UA 或用户标识，对高风险环境直接返回预编译的简化版路由组件
