动态添加/删除路由时，如何避免 Route 重复注册或卸载失效？

Question

在基于 Vue Router（v4+）或 React Router（v6+）的微前端或权限路由场景中，动态添加/删除路由时易出现两大隐患：一是重复调用 `addRoute()` 导致同名/同路径路由被多次注册，引发导航异常、守卫重复执行甚至内存泄漏；二是调用 `removeRoute()` 后，已激活的路由实例未及时销毁，组件未卸载、守卫未解绑、状态残留，造成“卸载失效”。根本原因在于：路由注册是全局副作用操作，缺乏幂等性校验；而路由移除仅从配置表删除，不触发对应活跃视图的生命周期清理。尤其在频繁切换角色权限、热插拔模块时，该问题会集中暴露——例如用户降权后仍能通过 URL 手动访问已被移除的路由，或守卫函数被多次叠加调用。如何确保动态路由增删的原子性、幂等性与完整性，是保障应用稳定性与安全性的关键挑战。

Answer 1

```html

一、现象层：动态路由增删的典型故障表征

• 用户切换角色后，仍可手动输入 URL 访问已被权限回收的 /admin/logs 路由（守卫未拦截）
• 多次加载同一微前端模块，router.addRoute() 被重复调用 3 次，导致 beforeEach 守卫执行 3 遍
• 卸载子应用后，其注册的 router.beforeEach 仍响应全局导航，引发 Cannot read property 'xxx' of undefined
• Vue 组件实例未销毁，onUnmounted 不触发，Pinia store 状态残留，内存占用持续增长

二、机制层：Vue Router v4+ 与 React Router v6+ 的核心差异与共性约束

维度	Vue Router v4+	React Router v6+
路由注册原子性	addRoute() 是纯配置追加，无路径/名称冲突检测	useRoutes() + createBrowserRouter() 依赖完整重置，无增量更新 API
路由移除语义	removeRoute(name) 仅删除配置，不清理激活匹配	无原生 removeRoute；需重建 RouterProvider，但组件树未强制 unmount

三、根因层：三大非幂等性缺陷深度剖析

1. 注册侧无幂等校验：路由注册本质是向全局 matcher 注入 record，但 Vue Router 的 addRoute 未校验 name 或 path 是否已存在
2. 移除侧无生命周期联动：删除配置 ≠ 销毁视图。当前活跃的 <RouterView> 或 <Outlet> 实例仍持有旧组件引用与守卫闭包
3. 守卫注册无解绑契约：通过 router.beforeEach(fn) 添加的全局守卫，缺乏与路由生命周期绑定的自动清理机制

四、方案层：跨框架统一治理模型（含代码实现）

我们提出「路由注册中心（Route Registry）」抽象层，封装幂等增删与主动卸载逻辑：

// Vue Router v4+ 幂等注册示例
const registry = new RouteRegistry(router);

registry.addRoute({
  name: 'dashboard',
  path: '/dashboard',
  component: () => import('./Dashboard.vue'),
  meta: { module: 'core' }
}); // ✅ 自动跳过重复 name 注册

registry.removeModule('analytics'); // ✅ 主动 unmount 当前匹配组件 + 清理守卫 + 删除配置

五、架构层：微前端场景下的路由协同治理流程图

graph TD
  A[主应用触发权限变更] --> B{路由注册中心}
  B --> C[校验待注册路由是否已存在]
  C -->|是| D[跳过 addRoute]
  C -->|否| E[调用 router.addRoute]
  B --> F[遍历当前活跃路由匹配]
  F --> G[对属于 moduleX 的所有 matched routes]
  G --> H[触发 router.replace 重定向至 403/redirect]
  G --> I[手动调用组件实例 onBeforeUnmount]
  G --> J[移除关联的 beforeEach 守卫引用]
  B --> K[最终执行 router.removeRoute]

六、工程层：生产级验证清单（Checklist）

• ✅ 所有 addRoute 调用必须经由 RouteRegistry 封装
• ✅ 每个动态路由配置必须携带唯一 meta.moduleId 用于批量管理
• ✅ 全局守卫注册必须使用 router.beforeEach((to, from, next) => {...}, { id: 'auth-guard-1' }) 可解绑形式
• ✅ 微前端子应用 unmount 钩子中必须显式调用 registry.removeModule(moduleId)
• ✅ 浏览器地址栏直接访问已移除路由时，应返回 403 或重定向至 /404，而非白屏或报错

七、演进层：未来可扩展方向

结合 Web Components + Custom Elements Lifecycle，将路由单元封装为自治的 <micro-route> 自定义元素，内建 connectedCallback 自动注册、disconnectedCallback 自动清理，从根本上解耦框架绑定。

```