useLocation().state 仅在 JS 导航会话内有效，刷新即丢失，需配合 localStorage/sessionStorage 持久化；keep-alive 需路由 meta 和 key 配合；sessionStorage 存取需 JSON 序列化；路由 state 仅适合轻量透传。
React Router v6 里用 useLocation().state 传表单数据容易丢
直接用 navigate('/detail', { state: formData }) 跳转后，useLocation().state 确实能取到数据，但刷新页面就没了——这不是 bug，是设计使然。它只在 JS 导航的当前会话内有效，不持久、不跨刷新。
常见错误是把它当 localStorage 用，结果用户 F5 一下，state 变成 undefined，表单字段全空。
- 别在组件初始化时无条件依赖
useLocation().state做默认值，先判空再解析 - 若需跨刷新保留（比如用户中途关页又回来），必须搭配
localStorage或sessionStorage做兜底 -
state适合轻量、临时、单次流转的数据，比如跳转来源标记、简单筛选项；大对象或关键字段别放这儿
Vue Router 中 keep-alive 对表格组件无效的典型原因
给 <router-view> 包一层 <keep-alive> 后，表格滚动位置、已选行、分页数还是丢了？大概率是没配对路由元信息或组件 key 冲突。
keep-alive 不是全局开关，它只缓存满足条件的组件实例。表格状态“没留住”，往往不是它没工作，而是组件被强制重建了。
立即学习“前端免费学习笔记（深入）”；
- 确保路由配置中设置了
meta: { keepAlive: true }，且<keep-alive>的v-if条件正确匹配该 meta - 表格组件内部用了
key属性且依赖动态值（如:key="tableId"），每次路由参数微变就触发重渲染，缓存失效 - 如果表格用了
computed或watch主动重置数据（比如监听$route.query并清空 selection），那keep-alive也救不了
sessionStorage 存表格状态时的序列化陷阱
存表格的选中行 ID 数组、当前页码、排序字段这些看似简单的数据，sessionStorage.setItem('table-state', selectedIds) 一执行就报错？因为 sessionStorage 只接受字符串，传数组或对象会自动转成 "[object Object]"，取出来就是废的。
更隐蔽的问题是：存进去的是字符串，取出来没 JSON.parse 就直接当数组用，运行时 TypeError。
- 存之前必须
JSON.stringify()，取之后必须JSON.parse()，且要包 try-catch ——getItem返回null时JSON.parse(null)直接崩 - 键名建议带业务前缀和路由标识，比如
"table-order-list-state"，避免不同表格共用一个 key 覆盖数据 -
sessionStorage关闭标签页即清空，适合临时草稿；若需跨标签页或长期保留，得切到localStorage并加过期逻辑
多页表格联动时用路由 state 透传的边界
从订单列表页 → 订单详情页 → 编辑页，返回列表页时想恢复原筛选+选中状态，有人把整个表格 state 塞进每层跳转的 state，结果越传越重、越传越慢，甚至触发浏览器 history.state 大小限制（通常 640KB）。
路由 state 是轻量通道，不是状态仓库。它的容量有限，且每次 push 都生成新 history entry，大量透传会污染历史栈。
- 只透传必要字段：比如当前页码
currentPage、关键筛选参数status，而不是整个tableData - 中间页（如详情页）不需要保留表格状态时，不要把上一页 state 原样透传，避免冗余叠加
- 真正需要跨多步共享的状态（如“编辑中订单ID”），更适合存在
sessionStorage或 URL query 中，由各页按需读取
