popstate 事件仅响应历史变化，不更新历史；真正更新历史需用 pushState() 或 replaceState()。首次加载需用 replaceState 垫底避免 null state 导致监听失效，UI 更新须手动同步 event.state 或 URL，并处理滚动、模态框等副作用。
popstate 事件本身不更新历史，只响应历史变化
很多人误以为 onpopstate 或 addEventListener('popstate', ...) 是用来“更新”浏览器历史的，其实它只是被动监听器——历史已经变了，它才被触发。真正更新历史的操作只能靠 pushState() 或 replaceState()。
常见错误现象：在 popstate 回调里调用 pushState()，结果用户点一次后退，页面跳两次、历史栈混乱、甚至无限循环。
- ✅ 正确做法：把视图更新逻辑（比如切换 tab、关闭弹窗、渲染新内容）写在回调里，而不是再推新历史
- ❌ 错误做法：在
popstate中无条件调用pushState({page: 'xxx'}, '', '/xxx') - ⚠️ 特殊例外：仅当你需要「修正当前历史项」时才用
replaceState()，例如用户前进后发现 URL 参数有误，想静默修复而不增加栈长度
为什么第一次按后退没反应？因为初始 state 是 null
页面首次加载时，history.state 恒为 null，且 Safari、iOS WebView、部分安卓 WebView 会直接忽略 pushState(null, ...) 或 pushState({}, ...)，导致后续 popstate 根本不触发。
必须在 DOM 加载后立即执行垫底操作：
立即学习“前端免费学习笔记（深入）”；
if (history.state === null) {
history.replaceState({ init: true }, '', location.href);
}
- 必须用
replaceState，不是pushState：避免多出一个不可见的历史项，用户点一次返回就跳到空白页 - state 不能是
null或空对象{}：某些浏览器认为它们“无意义”，不标记该历史项为可回溯 - 这行代码要尽早执行——放在
<script></script>内联脚本里，或DOMContentLoaded第一时间，别等框架 mounted 钩子
如何区分后退和前进？别依赖 history.length 绝对值
event 对象里没有 direction 字段，也不能靠 history.length 当索引用——它只是会话内总条目数，包含已销毁项，不同浏览器实现略有差异。
安全做法是维护一个相对指针：
let historyIndex = history.length;
window.addEventListener('popstate', () => {
const newIndex = history.length;
if (newIndex < historyIndex) {
console.log('后退');
} else if (newIndex > historyIndex) {
console.log('前进');
}
historyIndex = newIndex;
});
- 这个比较只适用于“连续点击浏览器按钮”的场景；如果用户手动输入 URL 或刷新，
history.length可能重置，需额外兜底 - 移动端 WebView（尤其微信内置浏览器）有时会在应用切后台再切回时丢失 popstate 触发，建议配合
visibilitychange做状态校验
popstate 回调里怎么驱动真实 UI 更新？
popstate 只通知“历史变了”，不会自动改 DOM、不会切换 React 组件、也不会滚动到锚点。你得自己从 event.state 和 location 里取数据，再手动同步。
- 优先读
event.state：它是你上次pushState或replaceState传进去的对象，最准确 - fallback 读
location.pathname和location.search：当event.state为null（比如用户直接访问链接后刷新），就得靠 URL 解析路由 - 别忘了清理副作用：比如打开的模态框要在后退时关闭，但前进时可能要恢复，得根据 state 判断是否“已打开”
- 滚动行为要显式控制：浏览器不会自动滚回上次位置，需调用
window.scrollTo()或保存scrollY在 state 里
最易被忽略的一点：服务端没配 fallback 路由时，用户刷新 /detail/123 页面会 404——popstate 再准也没用，前端根本没机会运行。
