Vue Router 路由管理如何使用 router.addRoute 动态添加路由

router.addRoute 是 Vue Router 4 动态注册路由的核心方法，用于运行时按需添加新路由，仅注册不自动导航，需手动调用 push/replace；支持函数式组件加载、命名管理及在导航守卫中安全添加与防重处理。

router.addRoute 是 Vue Router 4（Vue 3）中动态注册路由的核心方法，它让你能在应用运行时按需添加新路由，而不是全部写死在初始化配置里。关键点在于：添加后不会自动跳转，也不影响已有导航逻辑，需要你主动控制是否导航、如何导航。

基本用法：添加单个根级或命名路由

调用 router.addRoute(routeRecord) 即可注入一条新路由规则。routeRecord 是一个标准的路由记录对象，至少包含 path 和 component：

1. 支持函数式组件加载：component: () => import('./views/Admin.vue')
2. 可选添加 name 字段，用于后续精准管理（如删除、命名跳转）
3. 不传 name 时，该路由只能通过 path 匹配，无法被 removeRoute() 或 router.removeRoute() 直接移除

添加后要显示？得手动导航

addRoute 只是“注册”，不是“激活”。即使当前 URL 已匹配新路径，页面也不会自动渲染对应组件：

1. 如果想立即展示新路由，需调用 router.replace('/new-path') 或 router.push('/new-path')
2. 推荐用 replace 避免历史栈重复（尤其在权限跳转场景）
3. 可 await 等待导航完成：await router.replace('/about')

在导航守卫中安全添加（推荐权限场景）

常见于登录后根据角色拉取菜单并生成路由。此时不能直接 push/replace，否则可能触发无限重定向：

1. 在 router.beforeEach 中检查目标路由是否存在
2. 若缺失，调用 addRoute 动态注册，然后 return to.fullPath
3. Router 会自动触发一次重试导航，这次就能命中新注册的路由
4. 务必加防重逻辑（如用 Set 记录已添加的 name），避免重复 add 同一路由

删除动态路由的三种方式

动态添加自然需要灵活清理：

1. 名称冲突覆盖：再次 addRoute 一个同名路由，旧路由自动被替换
2. 使用返回的 remove 函数：const remove = router.addRoute({...}); remove() —— 适合无 name 的临时路由
3. 按名称删除：router.removeRoute('admin') —— 要求原路由定义了唯一 name