onpopstate 无法真正拦截浏览器前进/后退，仅能被动响应导航完成后的状态变化。它不支持 preventdefault，需通过初始化 state、规范使用 pushstate/replacestate、在回调中检查 event.state 并主动跳转或弹窗来实现“感知后决策”。
onpopstate 事件本身不能拦截数据，它只是通知你“历史栈变了”，所有所谓“拦截”，都是在事件回调里做状态检查 + 主动跳转或弹窗，并非真正阻止浏览器行为。
为什么 onpopstate 无法真正拦截前进后退
浏览器不提供阻止 history 导航的 API。onpopstate 是被动监听器，触发时导航动作已完成——URL 已变、页面已跳（或即将跳），你只能响应，不能取消。
-
event.preventDefault()在popstate中无效，调了也没用 - 用户手动改地址栏再点返回，
popstate可能不触发（尤其 Safari） - 直接关闭标签页或刷新，
popstate根本不触发，得靠beforeunload补位
如何用 popstate 感知并干预返回/前进动作
关键不是“拦截”，而是“感知后决策”。必须先让 popstate 能触发，再在回调里读取 event.state 做判断。
- 首次加载页面时
history.state为null，需立即执行history.replaceState({ init: true }, '', location.href)垫底，否则第一次后退不触发 - 每次路由跳转必须用
pushState或replaceState，传入非空对象（别传null或{}，Safari 会忽略） - 在
popstate回调中检查event.state内容，比如event.state.dirty === true就弹confirm，选“取消”则调history.go(1)强行前进一步 - 避免在回调里再调
pushState，容易引发无限循环；要用replaceState修正当前项
怎么区分是前进还是后退
popstate 事件对象没有 direction 字段，必须自己维护一个参考值对比 history.length。
- 声明
let historyIndex = history.length初始化 - 在
popstate回调里算新长度：const newIndex = history.length if (newIndex → 后退；<code>if (newIndex > historyIndex)→ 前进- 注意：
history.length是会话总条目数，含已销毁项，只适合相对比较，不能当索引用
移动端 WebView 特别容易踩的坑
微信、支付宝等内置 WebView 对 popstate 更敏感，漏掉初始化或传空 state，大概率白屏或跳错页。
- 垫初始 state 的代码必须放在
DOMContentLoaded后、任何路由逻辑前执行 - 别用
window.onpopstate = handler，IE11 以外已弃用，且无法移除监听 - iOS Safari 某些版本从后台切回时可能不触发
popstate，建议加兜底：监听visibilitychange并手动校验当前 URL 和预期状态 - state 对象别存大体积数据（如 base64 图片），不同浏览器限制不同，几百 KB 就可能被截断或丢弃
真正难的不是写监听函数，而是把 state 设计成可复原、可判断、可清理的轻量结构，并和业务流程严丝合缝地对齐——比如表单页存 { dirty: true, step: 2 }，结果页存 { submitted: true }，返回时才能准确知道该弹窗还是该还原。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
