Vue路由状态保留分三类：keep-alive缓存组件实例（短期）、localStorage/sessionStorage持久化关键字段（刷新后恢复）、Pinia管理跨组件共享状态（含持久化插件），iframe需用v-show保活并配合postMessage同步状态。
Vue 中路由切换时的状态保留，核心在于区分“临时缓存”和“持久留存”两类需求。前者关注组件实例不销毁、状态不重置；后者强调刷新或关闭后数据依然可恢复。两者逻辑不同，适用场景也不同，不能混用。
用 keep-alive 缓存组件实例（适合短期状态）
这是最直接、开销最小的方案，适用于返回即见原样（如滚动位置、表单输入、筛选条件）的交互场景。
- 必须在
<router-view>外层包裹<keep-alive>，推荐使用 v-slot 语法确保精准控制：
<router-view v-slot="{ Component }">
<keep-alive :include="['ListPage', 'SearchResult']">
<component :is="Component" />
</keep-alive>
</router-view>
- 被缓存的组件必须显式声明
name选项，否则include无法匹配； - 用
:include白名单比:exclude更安全，避免误缓存高内存组件（如富文本编辑器、地图）； - 配合
max属性限制缓存数量，防止内存持续增长，例如:max="5"启用 LRU 清除策略。
用 localStorage / sessionStorage 持久化关键字段（适合刷新后恢复）
keep-alive 无法应对页面刷新——组件实例一销毁，状态全丢。此时需把真正重要的字段手动存到本地存储。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 在组件
beforeUnmount钩子中保存数据，例如：
beforeUnmount() {
if (this.searchQuery) {
localStorage.setItem('list_search_query', this.searchQuery);
}
if (this.scrollTop !== undefined) {
localStorage.setItem('list_scroll_top', this.scrollTop.toString());
}
}
- 在
created或mounted中读取并还原，注意做 JSON 解析和类型校验； - 优先用
sessionStorage存放临时操作态（如草稿），它在标签页关闭后自动清理，更安全； - 避免整组件状态 dump，只存必要字段，减少序列化开销与存储污染。
用 Pinia（或 Vuex）协调跨组件共享状态
当多个页面/组件需要响应同一份状态（如用户筛选偏好、全局配置开关），且该状态需在路由跳转中保持一致，Pinia 是更清晰的选择。
- 将状态定义在 store 中，组件通过
storeToRefs或useStore访问，无需手动同步； - 搭配插件
pinia-plugin-persistedstate可一键启用 localStorage 持久化，支持按 store 或字段粒度配置； - 注意：Pinia 本身不解决组件重渲染问题，它和 keep-alive 是互补关系——前者管“数据在哪”，后者管“组件是否重建”。
特殊场景：iframe 状态保持
若页面内嵌了 iframe（如第三方系统入口），路由切换时 iframe 默认会 reload。这不是 Vue 的问题，而是浏览器行为。
- 不用
v-if控制显示，改用v-show，让 iframe 始终保留在 DOM 中，仅切 visibility； - 对多 iframe 场景，建议引入资源池机制：限制同时活跃的 iframe 数量，非活跃的设为
display: none并暂停其计时器或轮询； - 如需记录 iframe 内部状态（如表单填写），需通过
postMessage主动与父页面通信，并由父页面统一存入 localStorage。
