popstate 是唯一可靠感知浏览器前进/后退的机制，但需先用 pushstate 或 replacestate 注入非空 state 才能触发；首次加载时 history.state 为 null，须用 replacestate 垫初始状态；事件本身不提供方向信息，需自行维护 history.length 比较判断。
popstate 是唯一能可靠感知浏览器前进/后退动作的机制，但它不会自动生效——必须先用 pushState 或 replaceState 注入带非空 state 的历史记录，否则监听器永远收不到事件。
为什么 window.addEventListener('popstate', ...) 没反应
最常见原因是：页面没主动创建可回溯的历史条目。直接访问 URL、点击普通链接、调用 location.href = '...' 都不会触发 popstate。
- 检查
history.state是否为null：首次加载时它通常是null，此时哪怕注册了监听也没用 - 别传
null或{}给pushState：旧版 Safari 会忽略空对象，推荐用最小有效结构，例如{ page: 'detail', id: 123 } - 不要用
onpopstate = handler：IE11 不支持，必须用addEventListener - Vue Router / React Router v6+ 已接管 history，手动监听可能被覆盖或延迟，需确认是否与框架冲突
如何让第一次后退就触发 popstate
用户点第一次“返回”，页面跳走、监听函数没执行？这是因初始页没有带 state 的历史项。解决方案是“垫一条”：
if (history.state === null) {
history.replaceState({ init: true }, '', location.href);
}
这段代码必须在 DOM 加载后、任何路由逻辑前执行。
- 用
replaceState，不是pushState：避免多出一个空白历史项，导致用户点一次返回就跳到“不可见页” - 它不新增历史长度，只给当前页打上可读的
state标记 - 移动端 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 是会话内总条目数（含已销毁的），不能当绝对序号用，只适合做相对比较。
- 不要在
popstate回调里再调用pushState：极易引发循环（比如弹窗后又推一个 state，用户再按返回又触发） - 若需更新当前页状态，用
replaceState更安全 - 该方案在 SPA 路由频繁变更时可能不准，建议配合 URL 路径或 query 参数交叉验证
真正难的不是写监听器，而是确保每次有意义的导航都对应一个带业务语义的 state —— 比如表单编辑中存 { dirty: true }，tab 切换时存 { tab: 'settings' }。漏掉任意一次 pushState，那段历史就变成“黑盒”，popstate 就再也无法感知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
