表单提交后数据丢失的根本原因是未将表单状态与路由生命周期绑定。应通过路由路径+参数生成唯一状态键、用history.state缓存必要字段、透传路由state实现跨页恢复，并在ssr中注入初始值避免hydration mismatch，成功后及时清理缓存。
Submit事件触发时路由未跳转，但表单数据已丢失
单页应用里用 form 提交，浏览器默认会刷新页面或跳转，但在 React/Vue 等框架中，你通常用 event.preventDefault() 拦截它，再走 JS 路由（比如 router.push()）。问题在于：用户填了一半表单，点了提交，校验失败或 API 报错，你想留在当前页并保留输入内容——但若没手动保存状态，input 值就清空了。
关键不是阻止默认行为，而是把表单字段和当前路由状态绑定起来。常见错误是只存到组件 state，但组件卸载后 state 就没了；或者用 localStorage 存太重，且不区分路由参数差异。
- 用
useLocation()（React Router v6）或useRoute()（Vue Router）获取当前路径 + search 参数，作为状态 key 的一部分 - 对每个
input的name或id加上路由路径前缀，避免不同页面同名字段冲突，例如login.emailvsregister.email - 在
handleSubmit里不直接清空表单，而是先调用setFormState()更新缓存，再决定是否跳转
拦截 Submit 后手动 push 路由，但浏览器后退键失效
很多人写 router.push('/success') 后发现点浏览器后退，回到的是上一个路由，而不是提交前的表单页——因为没保留表单页的 scroll 位置、输入焦点、甚至 URL 中的 query 参数（比如 ?ref=checkout）。
根本原因是：表单页本该是一个“可返回”的历史节点，但你用 JS 跳转覆盖了它。解决思路不是禁用后退，而是让表单页本身支持“可恢复”。
- 提交前用
history.replaceState()更新当前 history entry，把表单数据序列化进state字段（注意大小限制，别塞大对象） - 监听
window.popstate，在组件挂载时检查history.state是否含表单快照，有则还原input值 - 避免在
useEffect里无条件 reset 表单，改用key={location.key}控制组件重挂载时机
多步骤表单跨路由提交时，中间页状态意外丢失
比如地址页 → 支付页 → 成功页，用户在支付页点提交按钮，后端返回 400 错误，需回退到地址页并保留所有字段。这时单纯靠路由跳转会丢掉中间页的状态，尤其当地址页和支付页是两个独立组件时。
不能依赖全局 store 存整个流程数据（耦合重），也不该每个页面都自己存 localStorage（维护成本高）。折中方案是把“流程上下文”作为路由 state 透传。
- 从地址页跳转到支付页时，用
router.push({ path: '/pay', state: { address: formData } }) - 支付页提交失败后，用
router.back()，而不是router.push('/address')，确保能读到history.state里的原始数据 - 注意：Safari 对
history.state大小更敏感，超过 64KB 可能静默丢弃，建议只存必要字段，如email、phone，而非整个表单 DOM 结构
服务端渲染（SSR）下 Submit 拦截导致 hydration mismatch
Next.js 或 Nuxt 应用里，表单 HTML 是服务端直出的，但客户端 JS 拦截 submit 后又动态修改 input 值，React/Vue 会报 Text content does not match server-rendered HTML。这不是样式问题，是 SSR 渲染时表单值为空，而客户端却显示用户输入的内容。
核心矛盾在于：服务端不知道用户输过什么。解决方案不是关掉 SSR，而是让服务端也能拿到初始值。
- 把表单初始值通过
getServerSideProps或definePageMeta注入到页面 props，让 SSR 渲染时就有正确 value - 避免在
useEffect里直接 set 表单字段，改用defaultValue（React）或v-model.lazy（Vue），确保首次渲染一致 - 如果必须动态初始化（比如从 localStorage 读），加个
useEffect(() => { ... }, [])并配合useState的 lazy initializer，防止 hydration 时立即修改 DOM
最麻烦的不是怎么存，而是什么时候清——用户成功提交后，要清掉对应路由的缓存，否则下次进来还是旧数据。这个清理动作得放在 API 成功回调里，且带上当前路由唯一标识，别漏掉 query 变化的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
