body.onpopstate无效，因onpopstate是window级事件，必须用window.addeventlistener绑定；首次加载需replacestate垫入有效state，否则移动端监听失效；popstate无法拦截跳转，仅能跳转后补救。
body.onpopstate 无效，根本不会触发——别这么写。
为什么 body.onpopstate 完全没用
HTML 元素不支持 onpopstate 属性，body 标签加这个属性纯属被忽略，浏览器连解析都不会解析它。popstate 是 window 级事件，只能通过 window.addEventListener('popstate', ...) 绑定。
- 写成
→ 静默失败，控制台无报错也无日志 - 用
window.onpopstate = handler→ IE11 以外已弃用，且无法移除，容易内存泄漏 - 在 Vue/React 组件里挂载前没检查
history.state是否为空 → 第一次后退直接跳走，监听器压根不执行
必须先垫一条有效 state 才能监听到第一次后退
页面首次加载时 history.state 是 null，而 Safari、微信 WebView 会直接忽略 pushState(null, '', ...) 或 pushState({}, '', ...)，导致后续 popstate 永远不触发。
- 在
DOMContentLoaded后立即执行：if (history.state === null) { history.replaceState({ init: true }, '', location.href); } - 必须用
replaceState，不是pushState：避免多出一个空白历史项，用户点一次返回就跳到“不可见页” - 移动端（尤其是微信、支付宝）对此极其敏感，漏掉这步，90% 的后退监听失效
popstate 里怎么知道是后退还是前进
event 对象没有 direction 字段，event.state 里也存不了方向——方向只能靠比较 history.length 的变化。
- 维护一个变量：
let historyIndex = history.length - 在 popstate 回调里计算新长度：
const newIndex = history.length newIndex → 后退；<code>newIndex > historyIndex→ 前进- 注意：
history.length是会话内总条目数（含已销毁的），只适合相对比较，不能当数组下标用
SPA 中拦截路由跳转的真实边界在哪
你没法真正“拦截”浏览器前进后退——popstate 只是通知你“已经跳了”，不是给你机会阻止它。所谓“拦截”，本质是跳完再补救：
- 用户点后退 → 浏览器已跳到上一历史项 →
popstate触发 → 你读event.state判断是否需确认 → 弹窗 → 用户选“取消” → 你调history.go(1)强行跳回（但得确保栈里有可前进项） - 不要在 popstate 里再调
pushState：极易引发无限循环（弹窗→推状态→用户再按返回→又触发→再弹窗…） - 更稳妥的做法是提前用
replaceState标记当前页为“可安全离开”，在 popstate 中检查该标记决定是否弹窗 - 如果用了 Vue Router / React Router，优先用
beforeRouteLeave或useBlocker，它们比手动监听 popstate 更可靠、更易管理生命周期
最常被忽略的点：你以为监听了 popstate 就万事大吉，其实第一步垫 state 没做对，后面全白搭；而垫 state 的时机和方式，在不同 WebView 下差异极大，尤其微信里 replaceState 必须带非空对象、必须在 DOM ready 后立刻执行——晚几毫秒，就可能卡死整个导航逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
