onpopstate无法拦截后退，仅能响应历史跳转完成后的状态变更；需用replacestate提前垫底非空state，再在popstate中读取event.state还原视图，配合confirm模拟退出确认并用history.go(1)回跳。
onpopstate 本身不能拦截，只能响应
浏览器不提供真正拦截后退键的 API，onpopstate（或 window.addEventListener('popstate', ...)）只是「通知你用户已经完成了历史跳转」，此时页面 URL 和 history.state 都已变更，DOM 通常也已卸载——你无法阻止这个动作发生。所谓“恢复视图”，其实是靠提前埋点 + 事后还原实现的。
必须先用 replaceState 垫底，否则第一次后退不触发
常见现象：页面加载完，点一次后退，popstate 完全没反应。原因很直接：history.state 初始为 null，而 Safari、微信 WebView 等会忽略 pushState(null, ...) 或 pushState({}, ...)，导致历史项不可回溯。
- 在
DOMContentLoaded后立即执行：history.replaceState({ init: true }, '', location.href) - 必须用
replaceState，不是pushState：避免多出一个空白历史项，用户点一次返回就跳到不可见页 - 这一步漏掉，在 iOS 微信里大概率白屏或跳错，不是偶发问题，是必然失效
popstate 回调里怎么还原视图
popstate 只告诉你“历史变了”，不负责更新 UI。你要自己从 event.state 读数据，并同步到 DOM 或框架状态。关键点：
- 每次路由变化或状态切换时，用
pushState存轻量标识，比如{ page: 'detail', id: 123 }，别存 DOM 节点或大对象 - 在
popstate回调中，根据event.state.page判断目标视图，再手动渲染或触发框架路由（如 Vue Router 的router.push()） - 如果当前是模态框打开状态，
pushState时标记{ modal: 'preview', index: 5 }，popstate中就关闭模态框并滚动到对应位置 - 不要在
popstate里再调用pushState，容易无限循环；要用replaceState修正当前条目
如何模拟“退出确认”这类拦截效果
真拦截做不到，但可以做到：用户点后退 → 弹 confirm → 点取消就强行跳回去。前提是历史栈够深：
- 检测到
event.state.dirty === true（比如表单未保存），立即confirm('离开将丢失更改，确定吗？') - 用户点「取消」→ 调用
history.go(1)跳回（注意：要确保history.length > 1，否则无效） - 更稳妥做法：提前用
replaceState把当前页标记为{ safeToLeave: false }，popstate中检查该字段再决策 - 务必和
beforeunload配合：前者管前进/后退，后者管刷新/关闭，二者缺一不可
最易被忽略的点：移动端 WebView 对 replaceState 垫底和 state 非空的要求比桌面端严格得多，空对象、延迟挂监听、没做同源校验，都会让整个逻辑静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
