popstate 是监听浏览器返回/前进的唯一可靠方式，但需先用 pushstate/replacestate 注入非空 state，且首次加载需 replacestate 垫底；它不提供方向信息，无法阻止跳转，仅能事后响应。
不能直接监听浏览器“返回”或“前进”按钮点击动作，popstate 是唯一可靠途径，但它只在历史栈变化且 state 非 null 时触发——初始页面加载、纯 URL 跳转（如 location.href = '/x'）都不会触发。
为什么 window.addEventListener('popstate', ...) 没反应？
最常见原因是：没提前用 pushState 或 replaceState 注入带状态的历史记录。浏览器对“空 state”兼容不一，部分版本（如旧版 Safari）会忽略 {} 或 null，导致后续后退不触发事件。
- 必须至少调用一次
history.pushState({ dirty: false }, '', location.href)（哪怕只是复制当前 URL） - 避免传
null或空对象；推荐用最小有效对象，例如{ page: 'home' } - 不要依赖
onpopstate = handler，部分浏览器（如 IE11）不支持，必须用addEventListener - 如果页面由外链直接打开（非 SPA 内部跳转），首次加载不会触发
popstate，这是正常行为
如何让第一次后退就生效，而不是“点两次”？
很多开发者发现：用户第一次点返回，页面跳走了，没进监听函数。这是因为初始页面没有可回退的、带 state 的历史项。解决方案是主动“垫一条”：
if (history.state === null) {
history.replaceState({ init: true }, '', location.href);
}
这段代码应在页面初始化早期执行（比如 DOM 加载后、任何路由逻辑前）。它用 replaceState 把当前页“打上标记”，不新增历史条目，但确保下一次后退有 state 可读。
- 不用
pushState垫，否则用户点一次返回会回到“空白页”，体验断裂 - 别在
popstate回调里再pushState，容易造成循环（比如确认弹窗后又推一个，用户再按返回又触发） - 移动端 WebView（如微信、支付宝）对此更敏感，务必做此初始化
popstate 中怎么区分是后退还是前进？
popstate 事件本身不提供方向信息。浏览器没暴露 event.direction 这类字段，得自己维护一个“历史位置指针”：
let historyIndex = history.length;
window.addEventListener('popstate', () => {
const newIndex = history.length;
if (newIndex historyIndex) {
console.log('用户前进了一步');
}
historyIndex = newIndex;
});
这个方案在大多数场景下可用，但要注意：
-
history.length不是绝对序号，而是当前会话中总条目数（含已销毁的），所以仅适合相对比较 - 跨 tab / 多窗口操作会导致
history.length不一致，不适用于强一致性要求的场景 - 更稳的方式是把方向信息存进
state：每次pushState时加{ direction: 'forward' }，后退时自然能读到上一个 state 的方向
监听到 popstate 后，能阻止页面跳转吗？
不能。这是关键限制：popstate 是“事后通知”，不是“事前拦截”。当它触发时，URL 已经变了，历史栈已更新，你只能响应，无法取消。
所谓“拦截返回”，本质是：在用户点返回前，先用 pushState 把当前状态“固化”，然后在 popstate 里判断是否允许离开，并用 history.go(1) 或 history.forward() 强行跳回——但这要求历史栈至少还有 1 步可进。
- 表单未保存场景：进入编辑页时
history.replaceState({ unsaved: true }, '', location.href)；popstate中检查event.state?.unsaved，弹窗确认，用户选“否”就history.go(1) - 模态框打开时：用
pushState({ modal: 'confirm' }, '', '?modal=confirm')，关闭时用replaceState恢复原 URL - 永远别在
popstate里直接location.href = ...，这会破坏历史栈，且可能触发新popstate循环
真正容易被忽略的是：所有 pushState 和 replaceState 的 url 参数必须同源，否则静默失败；而 popstate 在 file:// 协议下基本不可用——这些边界情况，上线前必须真机验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
