动态路由与静态路由合并需遵循“隔离+校验+重置”三步：name严格隔离并加前缀/命名空间；addRoute前校验去重、重置matcher（推荐重建router实例）；通配符仅限静态路由末尾；组件路径须与懒加载完全对齐。
动态路由与静态路由合并不是简单拼接数组，关键在于避免 name 冲突、matcher 状态残留和通配符干扰。核心是“隔离 + 校验 + 重置”三步走。
路由 name 必须严格隔离
静态路由和动态路由的 name 字段不能重复，哪怕语义不同也会触发 Vue Router 的重复定义报错。常见错误是后端返回 user-list，而前端已定义同名静态路由。
- 静态路由统一加前缀，如
"static-login"、"static-404"、"static-layout" - 动态路由 name 由后端返回，前端不做硬编码；建议强制带命名空间，如
"menu-system-user-list"或"system:user:list" - 在调用
router.addRoute()前，遍历当前所有已注册路由（router.options.routes+ 已 add 的路由），检查 name 是否已存在
添加前必须清理 matcher 状态
Vue Router 的 matcher 是内部匹配器，addRoute() 只追加不覆盖，旧路由定义仍驻留内存。多次添加同名路由会导致冲突，且不会自动刷新映射关系。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- Vue 3（vue-router@4）：不推荐反复
addRoute。应先router.removeRoute(name)，再addRoute；或使用router.reset()配合重新初始化 - 更稳妥做法：每次生成新路由表后，用
createRouter({ routes: [...constantRoutes, ...accessedRoutes] })创建全新实例，替换旧 router（需同步更新 app.use(router)） - 避免把
addRoute当作“热更新”手段，它本质是增量注册，不适合权限切换类全量替换场景
通配符路由位置必须受控
兜底路由（如 /:pathMatch(.*)* 或 *）一旦提前注册，会拦截所有未命中路径，导致后续动态路由无法生效，甚至干扰 name 匹配逻辑。
立即学习“前端免费学习笔记（深入）”；
- 通配符路由只允许出现在 静态路由数组末尾，且 绝对不可出现在 dynamicRoutes 中
- 动态路由 path 必须精确，如
/system/user，而非/system/:any或/system/* - 若业务真需泛路径支持（如 CMS 页面），应在服务端约定路径规则，前端按明确 path 注册，不依赖前端通配
组件路径与懒加载需严格对齐
后端返回的 component 字段（如 "system/user/index"）必须与前端实际文件路径、webpack chunk 名称完全一致，否则懒加载失败，页面白屏。
- 建议后端字段约定为相对路径格式，前端统一包裹
() => import(`@/views/${route.component}.vue`) - 开发期可加校验：尝试
import()对应路径，捕获异常并 warn - 避免使用绝对路径或别名混用（如
~/views/xxx），确保 vite / webpack 解析行为一致
