根本原因是addRoute注入的路由仅存于内存，刷新后应用重载导致丢失；解决需三步：一、用localStorage或Pinia持久化插件存储路由配置；二、在router.beforeEach守卫中读取并批量addRoute，用next({path:to.fullPath})保留参数；三、将404路由作为最后一条动态路由追加，避免提前匹配。
页面刷新导致动态路由失效，根本原因是 addRoute 注入的路由只存在于内存中，刷新后整个 Vue 应用重载，路由实例回到初始状态，动态添加的部分全部丢失。解决的关键在于：把路由配置“存下来”，并在应用启动或守卫触发时“重新加回去”。下面分三步讲清楚怎么做。
一、持久化存储路由配置
登录成功后，后端返回的菜单/路由数据（通常是数组格式的路由对象）不能只临时使用，必须落地存储：
- 推荐用 localStorage + Pinia 持久化插件（如 pinia-plugin-persistedstate），自动序列化保存到本地，且与响应式状态同步；
- 若项目未用 Pinia，可直接用
localStorage.setItem('asyncRoutes', JSON.stringify(routes))存储原始路由数组； - 避免仅存在 Vuex/Pinia 内存中——刷新后 store 会重置，没持久化就等于没存。
二、在合适时机恢复动态路由
不能等到用户点菜单才加路由，必须在首次访问受保护页面前完成恢复。常用方式是结合路由守卫：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 在
router.beforeEach中判断：如果当前要跳转的路径不是登录页，且 store 或 localStorage 中已有路由数据，就批量调用router.addRoute； - 注意：要遍历添加，不能只加一个——每个动态路由对象都要单独 addRoute；
- 添加完成后，用
next({ path: to.fullPath })而非next(to.path)，否则 query 和 params 会丢失。
三、404 路由必须放在最后注册
很多白屏或误跳 404，其实是通配路由抢在动态路由前匹配了：
- 静态路由配置里不要包含
{ path: '*', ... }； - 把 404 路由作为最后一个动态路由追加，例如：
router.addRoute({ path: '/:catchAll(.*)', redirect: '/404' })； - 确保它在所有 asyncRoutes 添加完毕后再执行，否则仍会提前捕获请求。
不复杂但容易忽略。核心就三点：存得住、加得准、兜得对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
