结论：history.pushState和popstate不是自动保存/恢复状态的开关，而是手动接管导航生命周期的钩子；点击后退页面内容“丢失”是设计使然——pushState仅修改URL、存储state、新增历史条目，不操作DOM；popstate仅触发事件，不自动渲染，视图更新必须在回调中手写实现。
直接说结论：history.pushState 和 popstate 不是“自动保存状态”的开关，而是手动接管导航生命周期的钩子——回跳时页面内容不恢复，是因为你没在 popstate 里写还原逻辑，不是 API 漏了什么功能。
为什么点击浏览器后退按钮后页面内容“丢了”
这不是 bug，是设计使然。pushState 只改 URL、存 state、加历史条目，它不碰 DOM；popstate 只发事件，也不自动渲染。用户点后退，浏览器只是把历史栈指针挪回去，并触发 popstate，剩下的事——比如重载数据、切换组件、滚动定位——全得你手写。
- 常见错误现象：点击后退，URL 变了，但
<main></main>还是上一个路由的内容，或者干脆空白 - 根本原因：没绑定
popstate，或绑了但回调里没做任何视图更新 - 容易忽略的细节：首次加载页面时
popstate不触发（Chrome/Firefox），必须用history.state主动读一次来初始化视图
state 对象该存什么、不该存什么
state 是序列化后存在浏览器内存里的纯数据，不是引用快照。它只负责传递“意图”，比如“我要看用户 123 的详情”，而不是“把刚才那个 div 节点塞回来”。
- 推荐存：轻量可序列化的值，如
{page: 'user', id: 123, tab: 'profile'}或{query: {q: 'react', page: 2}} - 禁止存：DOM 元素、函数、
Promise、Date实例（会抛DataCloneError） - 性能影响：state 过大会拖慢历史栈切换速度，尤其在低端设备上；超过 640KB 可能在某些浏览器中被截断
pushState 和 replaceState 的真实使用边界
别只看“加记录”和“不加记录”的区别，关键在用户预期是否需要“返回上一步”。两者都改 URL、都存 state、都不刷新，但语义完全不同。
立即学习“前端免费学习笔记（深入）”；
-
pushState适合：Tab 切换、分页点击、搜索提交——用户明确希望点「后退」回到前一状态 -
replaceState适合：修正 URL（比如去掉#_=_）、补全 query（?utm_source=copy）、初始化默认参数——这些操作不该产生一条可回退的历史 - 典型陷阱：在
popstate回调里又调用pushState，会导致历史栈无限膨胀；应优先用replaceState更新当前项，除非真要新增路径
服务端兜底路由不是可选项，是硬性前提
前端用 pushState 把 URL 改成 /dashboard/settings，用户却刷新页面——如果服务器没配置，就 404。这不是前端能绕开的问题。
- 必须确保所有前端路由路径，服务端都返回同一份
index.html - 开发阶段：Webpack Dev Server 需开启
historyApiFallback: true；Vite 用server.historyApiFallback: true - 生产部署：Nginx 配置
try_files $uri $uri/ /index.html;；Apache 启用mod_rewrite并添加重写规则 - 容易踩的坑：只配了
/根路径 fallback，漏掉/static/xxx.js等资源路径，导致 JS 加载失败
最常被跳过的其实是首次加载时对 history.state 的检查——它决定了用户直接访问 /posts/42 和从首页点进来，是否走同一套初始化逻辑。这个判断一旦漏掉，整个状态链就断了。
