Vue动态路由更新核心是router.addRoute，需在导航前注册并用hasRoute验证；登录后同步拉权限、异步加载组件、逐条添加并校验；刷新时兜底恢复；登出时清理remove函数；权限拦截必须在beforeEach守卫中以hasRoute为唯一依据。
Vue 动态路由更新的核心是 router.addRoute，它不是补充配置，而是运行时实时注入路由规则。关键在于“时机”和“验证”——必须在导航触发前完成注册，且要用 router.hasRoute() 确认生效，否则用户会遇到白屏或 404。
登录后立即注入权限路由
用户登录成功后，不能等跳转到首页再拉权限、再加路由。必须同步执行三步：
- 调用接口获取当前角色的完整路由配置（含
path、name、component和meta） - 每条路由的
component必须写成异步函数：() => import('@/views/Dashboard.vue')，否则无法懒加载 - 逐条调用
router.addRoute(route)，建议为每条加meta: { dynamic: true }标记，便于后续识别清理
注册完成后，立刻执行 router.hasRoute('dashboard') 检查返回值是否为 true，确认路由已进入内部路由表。
刷新页面时自动恢复路由
用户刷新浏览器，动态路由全部丢失，但 token 仍在。此时需在 router.beforeEach 中兜底：
立即学习“前端免费学习笔记（深入）”；
- 判断
isLogin() && !router.hasRoute('home')，说明权限路由尚未加载 - 触发权限数据拉取 + 路由批量注册逻辑
- 注册完毕后，用
next({ path: to.fullPath, replace: true })重新走一遍导航流程，避免参数丢失或重复跳转
注意：router.getRoutes() 不可靠，它只返回已访问过的活跃路由；hasRoute 才是判断路由是否真正可用的唯一依据。
登出时必须清理残留路由
不清理会导致上一个用户的路由仍可被直接输入 URL 访问，造成越权风险：
- 每次
addRoute都返回一个清除函数：const remove = router.addRoute(route) - 登出时直接调用
remove()即可移除对应路由 - 若批量添加，可把所有
remove函数存入数组，登出时统一执行 - 清理后建议
router.push('/login')，防止停留在已失效页面
权限控制必须靠守卫，不能依赖菜单
菜单只是展示层，用户可能绕过菜单直接输入地址。真正的权限拦截只能在 beforeEach 中做：
- 检查
to.name是否存在：!router.hasRoute(to.name) - 若不存在，说明无权限，直接
next('/403')或重定向到首页 - 不要在菜单点击事件里做权限判断，也不要在路由
meta上硬编码roles并手动比对——守卫应以“路由是否存在”为唯一权威依据
