Vue 动态路由怎么使用 addRoute 做法在登录后动态挂载路由规则

登录后动态挂载路由需立即拉取权限数据并注册，确保跳转前路由就位；刷新时在守卫中兜底恢复；登出时清理路由；菜单与守卫分离，守卫才是权限控制唯一入口。

登录后动态挂载路由，核心是拿到权限数据、转成合法路由对象、用 router.addRoute 注册，并确保跳转前路由已就位。不能等页面打开再加，否则会白屏或 404。

登录成功后立即注册动态路由

用户输入凭证并验证通过后，应立刻请求后端返回该角色的可访问路由列表（结构如 path/name/component/meta），然后逐条注册：

1. 每条路由的 component 必须写成异步函数形式：() => import('@/views/xxx.vue')，否则无法懒加载
2. 调用 router.addRoute(route)，推荐给每条路由加 meta: { dynamic: true } 标记，方便后续清理
3. 若路由有父子关系（比如 Layout 下的子页），可传入父级 name：router.addRoute('Layout', childRoute)
4. 注册完成后，用 router.hasRoute('目标路由名') 检查是否生效，返回 true 才算成功

刷新时自动恢复路由状态

页面刷新后，内存中的动态路由消失，但用户仍处于登录态。需在路由守卫中主动兜底：

1. 在 router.beforeEach 中判断：如果已登录（如 token 存在），且关键路由（如 home）尚未注册，就触发权限路由拉取与注册逻辑
2. 注册完毕后，用 next({ path: to.fullPath, replace: true }) 重新触发导航，避免重复跳转或丢失参数
3. 不要依赖 router.getRoutes() 判断是否存在——它只返回已访问过的活跃路由；hasRoute 才是权威依据

登出时清理动态路由

不清理会导致残留路由干扰下一次登录，甚至出现越权访问：

1. 每次调用 addRoute 都会返回一个清除函数，例如：const remove = router.addRoute(route)
2. 登出时直接执行 remove() 即可移除对应路由；批量操作可把所有 remove 函数存进数组统一调用
3. 也可用 router.removeRoute('name')，但必须确保 name 唯一且已知，不如清除函数稳妥
4. 清理后建议再调用一次 router.push('/login')，避免停留在无效页面

菜单渲染与守卫拦截要分开做

菜单只是展示层，权限控制必须由路由守卫兜底：

1. 菜单生成时，遍历 router.getRoutes()，过滤出 meta.showInMenu === true 且当前角色在 meta.roles 中的路由
2. 守卫里不做角色比对，而是检查 !router.hasRoute(to.name) —— 路由不存在，说明无权限，直接重定向到 /403
3. 禁止在菜单点击事件里做权限判断，用户可能直接输入 URL 或刷新页面，守卫才是唯一可信入口