router.addRoute 是 Vue Router 4 动态注册路由的核心方法，用于运行时按需添加新路由，仅注册不自动导航，需手动调用 push/replace；支持函数式组件加载、命名管理及在导航守卫中安全添加与防重处理。
router.addRoute 是 Vue Router 4（Vue 3）中动态注册路由的核心方法，它让你能在应用运行时按需添加新路由，而不是全部写死在初始化配置里。关键点在于：添加后不会自动跳转，也不影响已有导航逻辑，需要你主动控制是否导航、如何导航。
基本用法：添加单个根级或命名路由
调用 router.addRoute(routeRecord) 即可注入一条新路由规则。routeRecord 是一个标准的路由记录对象，至少包含 path 和 component：
- 支持函数式组件加载：
component: () => import('./views/Admin.vue') - 可选添加 name 字段，用于后续精准管理（如删除、命名跳转）
- 不传 name 时，该路由只能通过 path 匹配，无法被 removeRoute() 或 router.removeRoute() 直接移除
添加后要显示？得手动导航
addRoute 只是“注册”，不是“激活”。即使当前 URL 已匹配新路径，页面也不会自动渲染对应组件：
- 如果想立即展示新路由，需调用 router.replace('/new-path') 或 router.push('/new-path')
- 推荐用 replace 避免历史栈重复（尤其在权限跳转场景）
- 可 await 等待导航完成：
await router.replace('/about')
在导航守卫中安全添加（推荐权限场景）
常见于登录后根据角色拉取菜单并生成路由。此时不能直接 push/replace，否则可能触发无限重定向：
立即学习“前端免费学习笔记（深入）”；
- 在 router.beforeEach 中检查目标路由是否存在
- 若缺失，调用 addRoute 动态注册，然后 return to.fullPath
- Router 会自动触发一次重试导航，这次就能命中新注册的路由
- 务必加防重逻辑（如用 Set 记录已添加的 name），避免重复 add 同一路由
删除动态路由的三种方式
动态添加自然需要灵活清理：
- 名称冲突覆盖：再次 addRoute 一个同名路由，旧路由自动被替换
- 使用返回的 remove 函数：const remove = router.addRoute({...}); remove() —— 适合无 name 的临时路由
- 按名称删除：router.removeRoute('admin') —— 要求原路由定义了唯一 name
