动态路由刷新丢失的本质是内存中通过router.addroute()添加的路由被清空，解决关键是刷新后自动重建路由表：持久化原始菜单数据至localstorage/sessionstorage，在路由守卫中检测to.matched.length===0且已登录时，读取菜单、生成并添加路由，再用next({ ...to, replace: true })强制重定向匹配。

刷新后动态路由丢失，本质是内存中通过 router.addRoute() 添加的路由被清空，而静态路由在应用初始化时就已加载。解决的关键不是“避免刷新”，而是让刷新后能自动重建动态路由表，并正确匹配当前 URL。

持久化菜单数据到本地存储

动态路由依赖后端返回的菜单结构，必须在刷新后仍能获取到原始菜单数据，否则无从重建。

• 登录成功后，把完整菜单数组（非路由对象）存入 sessionStorage 或 localStorage，例如：sessionStorage.setItem('menuList', JSON.stringify(menuData))
• 推荐使用 Pinia 搭配 pinia-plugin-persistedstate 插件，自动持久化 useMenuStore 中的 menuList 状态
• 避免只存路由对象——组件路径、元信息等可能含相对导入或运行时上下文，序列化后失效；只存原始菜单结构最安全

在路由守卫中按需重建路由

不能在应用启动时就加路由（此时 token 和菜单都未加载），也不能每次跳转都重复添加（引发重复警告）。要在首次访问且路由缺失时触发重建。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 判断依据：用户已登录（token 存在）且 当前目标路由

  to.matched.length === 0（即没匹配到任何路由）

• 执行逻辑：从持久化存储读取 menuList → 调用 <code>generateRoutes(menuList) 生成路由数组 → 遍历调用 router.addRoute() 注册
• 注册完成后，必须用 next({ ...to, replace: true }) 强制重定向一次，让 Vue Router 重新解析当前路径，否则仍会进入 404

防止重复添加与残留路由

用户切换账号、退出再登录、或多次刷新时，若不清理旧路由，会导致同名路由重复注册，控制台报 Duplicate named routes definition。

• 在添加新路由前，先清空已有动态路由：Vue Router 本身不提供清除接口，可通过重置 router.matcher 实现（Vue 3.4+ 推荐用 router.reset()）
• 更稳妥的做法是维护一个路由名称白名单，在添加前检查是否已存在，或统一用唯一命名空间（如 user:list、system:role）
• 退出登录时，主动调用清除逻辑，并清空 menuList 和 token 相关存储

确保 Layout 嵌套路由正确挂载

多数中后台项目将动态路由作为 Layout 的子路由（如 children），若父级路由未定义或未激活，子路由无法生效。

• 静态路由中必须预设好 Layout 路由（path: '/layout'，component: Layout），且不能设 redirect 或 meta.hidden 干扰匹配
• 动态添加时，统一指定父级名称（如 router.addRoute('layout', route)），而非直接 addRoute(route)
• 检查生成的路由对象是否包含正确的 parentName 或嵌套结构，避免因 children 层级错位导致渲染失败

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