popstate 事件需配合 history.pushstate/replacestate 才能触发，仅监听无法拦截后退；必须手动维护 state 与 ui 同步，避免框架冲突和循环调用。
不能直接监听“后退按钮”，只能监听历史栈变化；popstate 事件本身不支持阻止默认行为，所谓“拦截”必须靠状态标记 + 手动跳转修正。
popstate 为什么经常不触发或失效
常见原因不是代码写错，而是历史记录根本没被正确创建。只有通过 history.pushState() 或 history.replaceState() 添加过带非 null state 的条目，后续的前进/后退才会触发 popstate。直接改 location.href、用 router.push()（未封装 history API 的情况下）、或页面首次加载，都不会触发。
- Vue Router / React Router v6+ 默认接管了 history 栈，
window.addEventListener('popstate')可能被覆盖或延迟响应 - 某些浏览器对空
state（如pushState(null, '', url)）行为不一致，建议始终传对象：{ page: 'detail', id: 123 } - 事件监听器没在合适时机注册（比如组件已卸载后还在监听），会造成内存泄漏或逻辑错乱
如何让 popstate 真正响应前进/后退动作
关键不是监听本身，而是确保每次路由变更都对应一个可回溯的 state 条目。手动管理时，你得自己决定什么时候调用 pushState，而不是依赖框架自动注入。
- 用户点击「列表 → 详情」：调用
history.pushState({ route: 'detail', id: 42 }, '', '/item/42') - 用户在详情页编辑表单：再调用一次
pushState，把dirty: true写进 state，而非只靠 URL 变化 - 避免在
popstate回调里再调用pushState—— 容易引发循环，改用replaceState更新当前项即可 - 监听必须在页面生命周期早期注册，例如
document.addEventListener('DOMContentLoaded', ...)，或在 SPA 入口处统一挂载
如何模拟“退出确认”但不破坏历史栈
popstate 无法取消导航，只能事后补救。典型做法是：检测到要离开脏状态页时，弹窗 → 用户点「取消」→ 立即用 history.go(1) 跳回原页面。这要求历史栈至少有两层，且你清楚当前处于哪一层。
- 进入编辑页时：先
history.replaceState({ dirty: false }, '', location.href)，再pushState({ dirty: true }, '', location.href) - 在
popstate中检查event.state?.dirty，为true就弹confirm() - 用户点「取消」后，立刻执行
history.go(1)；点「确定」则继续清理数据并允许跳转 - 注意：如果用户是从外部链接直接打开编辑页（无前序历史），
history.go(1)会失败，应加 try/catch 或降级处理
React/Vue 中直接监听 popstate 的风险点
框架路由库（如 React Router v6、Vue Router 4）内部已基于 popstate 实现导航调度，你再手动监听，极易和框架逻辑冲突 —— 比如重复渲染、状态不同步、useEffect 依赖数组漏更新等。
- React 推荐用
createBrowserHistory创建独立实例，配合listen()方法，它比原生popstate更稳定、可取消 - Vue 组件中若必须监听，应在
onMounted注册、onBeforeUnmount移除，且避免在setup中闭包引用已销毁的响应式数据 - 永远不要在
popstate里调用router.push()或触发框架级导航 —— 这等于让两个路由系统打架
真正难的不是监听，而是保持 state 和 UI 的严格同步：每次 push 必须反映真实视图，每次 popstate 必须能精确还原上下文。很多人卡在“点了后退，页面没变但 URL 变了”，其实只是 state 没存对，或者还原逻辑压根没跑。
