Vue动态路由配合Pinia实现状态存取与恢复，关键在于用authStore持久化存储后端返回的完整RouteRecordRaw数组，登录后直接赋值，通过路由守卫和应用启动时双重挂载确保首屏就绪，并由rawRoutes派生菜单实现同步。

Vue 动态路由配合 Pinia 存储并恢复路由状态，关键在于把后端返回的路由配置“存得进、拿得出、挂得上、跟得住”。不是简单存个角色名，而是完整保存结构化路由数据，并在应用初始化时主动还原到 router 实例中。

用 Pinia 统一管理原始路由数据

新建一个 authStore，专门存放权限相关状态：

• 定义 rawRoutes 字段，类型为 RouteRecordRaw[]，用于存储后端返回的完整路由数组（含 path、name、component、meta、children 等）
• 定义 menuList 字段，用于驱动菜单渲染的扁平或树形结构（可由 rawRoutes 派生）
• 开启持久化：persist: { storage: sessionStorage }，避免刷新后丢失；敏感场景不选 localStorage
• 登录成功后，直接将接口返回的路由数据赋值给 rawRoutes，不要二次加工再存——保持原始结构便于后续解析

在路由守卫中按需挂载

利用 router.beforeEach 判断是否已加载动态路由：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 检查 authStore.rawRoutes.length > 0 且 !router.hasRoute('dashboard')（选一个典型权限页作标识）
• 遍历 rawRoutes，对每条调用 router.addRoute(route)；嵌套路由要确保父级先注册（例如先加 /system，再加 /system/user）
• 组件路径必须用动态导入：component: () => import(`@/views${item.component}.vue`)，要求后端返回的 component 字段格式统一（如 "sys/User"）
• 挂载完成后执行 next({ ...to, replace: true })，防止守卫重复触发

刷新后自动恢复路由

页面刷新导致内存路由清空，必须靠持久化+重挂载来补救：

• 在 main.ts 应用启动后、app.use(router) 之后，立即读取 authStore.rawRoutes
• 若非空，立刻执行挂载逻辑（和守卫里复用同一函数），保证首屏加载时路由已就位
• 注意：不要在 createRouter 的 routes 数组里预先写入动态部分，只留基础路由（登录页、404、重定向）
• 可加一层防重逻辑，比如用 store.isRoutesLoaded 标记，避免多次 addRoute 导致重复注册报错

让菜单与路由真正同步

菜单不是独立维护的，而是从 rawRoutes 派生而来：

• 写一个计算属性 filteredMenu，过滤掉 meta.hidden === true 或无访问权限的项
• 菜单项的 path 和 name 直接来自路由对象，点击时用 router.push({ name: item.name }) 跳转，天然保真
• 用户切换角色时，清空 rawRoutes 并重新请求，Pinia 响应式会自动触发菜单重渲染和路由重建

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！