需用KeepAlive精准缓存+路由/标签ID隔离草稿：为各路由组件设唯一name，动态维护cachedNames数组控制缓存；草稿key格式为draft_${route.name}_${route.params.id||'new'}，配合localStorage读写、beforeunload兜底保存及关闭时清理。
要让多标签页切换时每个页面的表单草稿互不干扰、各自独立保存和回显，核心是两件事：一是用 KeepAlive 拦住组件销毁，二是为每个标签页分配专属的草稿存储键。光靠缓存或光靠 localStorage 都不行，必须配合路由标识或标签唯一 ID 做隔离。
用 KeepAlive 精准缓存，避免状态丢失
直接包裹整个 <router-view></router-view> 会导致所有页面共用同一份组件实例，造成表单数据串页（比如“新建用户”和“编辑用户”都用 UserForm.vue，缓存后会互相覆盖）。正确做法是：
- 给每个需要保持状态的路由组件添加唯一的
name（不能省略），例如：export default { name: 'UserCreateForm' }或在defineOptions({ name: 'UserEditForm' })中声明 - 在布局组件中，用
<keepalive :include="cachedNames"></keepalive>动态控制哪些组件被缓存，cachedNames是一个响应式数组，只包含当前已打开标签页对应的组件名 - 每次新增/关闭标签页时，同步增删
cachedNames中的名称，确保只有活跃标签页处于缓存中
按标签页 ID 存取 localStorage 草稿
不同标签页即使同一路由（如 /user/edit?id=1 和 /user/edit?id=2），也必须视为完全独立的草稿空间。不能简单用路由路径做 key，而要用带业务上下文的唯一标识：
- 生成草稿 key 推荐格式：
`draft_${route.name}_${route.params.id || 'new'}`（如'draft_UserEditForm_123'或'draft_UserCreateForm_new'） - 在组件
onMounted时尝试从 localStorage 读取对应 key 的草稿，并用Object.assign()或深合并还原到表单响应式对象 - 监听关键字段变化（推荐用
watch监听整个表单对象，防漏），变化后立即写入该 key 对应的 localStorage —— 注意节流，避免高频输入频繁写入
处理页面卸载前的兜底保存
用户可能直接关掉标签页或刷新，这时 beforeUnmount 来不及触发。需补充监听 beforeunload 事件：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
- 在
onMounted中注册全局监听：window.addEventListener('beforeunload', saveDraft) -
saveDraft函数执行一次最终草稿落盘，使用和上面一致的 key - 记得在
onBeforeUnmount中移除监听，防止内存泄漏 - 注意：不要在
beforeunload中弹窗（现代浏览器已禁用），仅做静默保存
清理失效草稿，避免 localStorage 膨胀
用户关闭标签页后，对应草稿不应永久滞留。可结合标签管理逻辑主动清理：
- 当用户点击“关闭标签”时，在关闭前调用
localStorage.removeItem(key) - 如果支持“关闭其他标签”或“关闭全部”，批量清除对应 key
- 也可加个简易过期机制：存草稿时附带时间戳，回显前检查是否超过 7 天，自动忽略并清除
这套组合策略下，每个标签页就像一个独立的工作区：组件不销毁、状态不重置、草稿不越界。不需要引入 IndexedDB 或后端临时存储，localStorage + KeepAlive + 路由隔离就足够稳健。
