动态路由权限的核心是用户登录后按角色从后端获取结构化路由配置，通过 addroute 动态注入，并结合路由守卫控制导航；菜单渲染与权限校验分离，刷新时需重新拉取注册以保障状态一致。

动态路由权限的核心在于：用户登录后，根据其角色从后端获取可访问的路由配置，再通过 router.addRoute（Vue Router 4）或 router.addRoutes（Vue Router 3）动态注入到路由实例中，并配合路由守卫控制导航行为。关键不是“硬编码所有路由”，而是“按需加载、按权展示”。

后端返回结构化路由配置

前端不预置完整路由表，而是让后端返回当前用户有权限的路由元信息，通常包含路径、组件路径（或名称）、重定向、子菜单等字段。例如：

• path：如 "/order"
• name：如 "OrderList"（用于命名路由跳转和权限判断）
• component：如 "@/views/order/List.vue"（注意：实际加载需配合 import() 动态导入）
• meta：含 { title: "订单管理", icon: "icon-order", roles: ["admin", "ops"] }
• children：嵌套子路由数组（支持多级菜单）

该结构应与前端路由定义规范对齐，便于后续转换为 RouteRecordRaw 对象。

使用 addRoute 动态注册路由

Vue Router 4 中，addRoute 支持向指定 parentName 下添加子路由，也可不传 parent 直接添加顶层路由。推荐在用户登录成功后统一注册：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• 先清空可能存在的旧动态路由（可用 router.getRoutes().filter(r => r.meta?.dynamic) 区分）
• 遍历后端返回的路由列表，将 component 字符串转为异步组件：component: () => import(route.component)
• 每条路由调用 router.addRoute({ ...route, meta: { ...route.meta, dynamic: true } })
• 确保 404 或兜底路由始终存在且排在最后（避免被动态路由覆盖）

菜单渲染与权限校验分离

菜单只负责展示，权限控制交给路由守卫，二者解耦更健壮：

• 菜单渲染：遍历 router.getRoutes()，过滤出 meta.showInMenu === true 且当前用户角色在 meta.roles 中的路由，递归生成侧边栏或顶部导航
• 路由守卫：在 router.beforeEach 中检查目标路由的 to.meta.roles，若当前用户角色不满足，则重定向到无权限页（如 /403）
• 不要在菜单点击时做权限判断——用户可能直接输入 URL 或刷新页面，守卫才是唯一可信入口

处理刷新与路由状态丢失

页面刷新后，动态添加的路由会消失，必须重新拉取并注册：

• 登录成功后将用户角色、token 存入 pinia / vuex / localStorage
• 在 router.beforeEach 中检查 !router.hasRoute("home")（或任一核心动态路由），若未注册则触发权限路由初始化逻辑
• 避免重复注册：可用一个标志位（如 isRoutesAdded）或检查已注册路由数量来控制
• 首次进入时若尚未登录，先跳转登录页；登录后跳回原目标地址（next(to)）

不复杂但容易忽略：动态路由本质是“运行时补全路由表”，它依赖稳定的后端权限模型、清晰的前端路由约定，以及守卫与菜单的职责划分。只要数据结构对得上、注册时机卡得准、守卫逻辑写得严，权限就能稳稳落地。