角色变更后必须清旧加新：先遍历Pinia中维护的路由name列表调用router.removeRoute清除旧路由，再重新buildRoutes并addRoute；路由守卫中检查isDynamicAddedRoute未加载时触发buildRoutesAction，并next({ path: to.fullPath, replace: true })强制重定向；菜单须读取Pinia中accessibleRoutes确保与路由一致，避免404或白屏。
角色变更后必须清旧加新
用户切换角色时，不能只添加新路由，必须先清理之前动态注册的所有权限路由。vue-router 4 没有 addRoutes 批量方法，但提供了 removeRoute 和 addRoute 单条操作。推荐做法是：在 Pinia 的 permission store 中维护一个已添加路由的 name 列表，每次角色变更前遍历该列表调用 router.removeRoute(name)，再重新构建并添加新路由。
路由守卫里做首次加载兜底
页面刷新后动态路由会丢失，需在全局前置守卫中拦截未登录/未加载动态路由的状态：
- 检查
permissionStore.isDynamicAddedRoute是否为 false - 若未加载，则调用
permissionStore.buildRoutesAction()获取并添加路由 - 添加完成后，用
next({ path: to.fullPath, replace: true })触发一次重定向，确保新路由立即生效
菜单与路由保持同一份数据源
Element Plus（或 Element UI）的侧边栏菜单不应直接读取 router.getRoutes()，而应从 Pinia 的 permission store 中读取已过滤的 accessibleRoutes。这样能保证：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 菜单项和可访问路由严格一致，避免点击跳转 404
- 角色切换后，只需更新 store 中的 routes 数组，菜单自动响应式更新
- 菜单图标、排序、隐藏状态等元信息可随路由配置一并返回，无需二次映射
避免常见静默失败
以下细节容易导致“看起来没变化”：
- 嵌套路由添加时漏传父级
name，导致子路由无法挂载——addRoute(parentName, childRoute)必须明确指定 - 后端返回的路由 path 缺少前导斜杠（如
"user/list"），而前端期望"/user/list"，造成匹配失败 - 组件懒加载路径写错（如
import('@/views/User.vue')实际文件是UserIndex.vue），控制台无报错但页面白屏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
