动态路由与静态路由合并需遵循“隔离+校验+重置”三步: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() 只追加不覆盖,旧路由定义仍驻留内存。多次添加同名路由会导致冲突,且不会自动刷新映射关系。

