vue动态路由结合本地存储实现无感离线路由恢复，核心是将权限路由配置序列化后存入localstorage，并在启动时读取注入，通过hasroute防重复添加，离线时用代理组件兜底，配套登出清理与版本更新机制。
Vue 动态路由结合本地存储实现无感离线路由恢复，核心在于：**把用户权限路由配置持久化存到 localStorage 或 sessionStorage，并在应用启动时优先读取、动态注入，同时规避刷新丢失和重复添加问题**。它不是单纯缓存页面状态，而是让整个可访问的菜单结构和路由能力在断网或刷新后依然可用。
路由配置持久化存储
登录成功后，后端返回用户专属的菜单/路由数据（如数组形式的路由对象），前端不应只存 Vuex/Pinia，必须同步写入本地存储：
- 使用 localStorage 存储完整路由配置（适合长期保留，如用户角色不变）
- 用 JSON.stringify() 序列化后再保存，避免对象引用或函数丢失（注意组件异步导入路径需为字符串，不能存 `() => import(...)` 实例）
- 示例代码：
localStorage.setItem('userRoutes', JSON.stringify(menuList))
应用启动时自动恢复路由
在路由守卫或 App 初始化阶段（如 main.js 或 router/index.js 的 setup 阶段），检查本地是否有缓存路由：
- 先尝试从 localStorage 读取，解析为数组；若存在且非空，则逐条调用 router.addRoute() 注入
- 务必对重复添加做防护：可在 addRoute 前用 router.hasRoute(name) 判断是否已存在同名路由
- 若本地无缓存或解析失败，再走正常权限接口拉取——这样既支持离线首屏，又不影响在线更新
离线场景下的路由跳转兜底
当网络中断时，用户点击菜单仍需能导航（哪怕只是展示骨架页或提示）：
- 所有动态路由的 component 字段应统一指向一个“懒加载代理组件”，例如：
component: () => import('@/views/OfflineFallback.vue') - 该组件内部判断 navigator.onLine 状态：在线则正常 import 真实页面；离线则渲染静态内容或缓存的上次数据
- 配合路由 meta 字段（如 meta: { requiresAuth: true, offlineReady: true }）做精细化控制
清理与更新机制
本地缓存不是一劳永逸，需配套维护策略：
- 用户登出时，主动清除 localStorage.userRoutes 和 token 相关项
- 权限变更（如后台调整菜单）后，新登录响应中带 version 字段，比对本地 version 不一致时强制清空重载
- 避免直接覆盖式写入，推荐用 key + timestamp 组合键（如 userRoutes_v2_1722225540），便于灰度切换和回滚
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
