必须先用 replacestate 垫底初始 state，否则 popstate 无法触发；因 history.state 初始为 null，且 null/空对象在 safari 等浏览器中被忽略，需在 dom 加载后立即执行 replacestate({ init: true }, '', location.href)。
popstate 事件不会自动监听前进后退——你必须先用 pushState 或 replaceState 写入非空 state，否则监听器永远收不到事件。
为什么 window.addEventListener('popstate', ...) 没反应
不是代码写错了，是浏览器根本没东西可发。常见原因包括：
-
history.state为null（首次加载页面时必然如此），且你没用replaceState垫底 -
pushState(null, '', '/foo')或pushState({}, '', '/foo')——null和空对象在 Safari 等浏览器中被忽略，导致历史项不可回溯 - 监听器挂得太晚：比如塞在某个组件的
mounted钩子里，而用户第一次点后退时组件还没初始化 - 用了
body.onpopstate或window.onpopstate = handler—— 前者无效，后者 IE11 以外已弃用，且无法清理
如何让 popstate 第一次后退就触发
关键是在 DOM 加载后、任何路由逻辑前，检查并垫一条初始状态：
if (history.state === null) {
history.replaceState({ init: true }, '', location.href);
}
这段代码必须执行一次，且只能用 replaceState（不是 pushState），原因如下：
- 避免多出一个空白历史项，导致用户点一次返回就跳到“不可见页”
-
replaceState不增加history.length，只给当前页打上可读的state标记 - 移动端 WebView（微信、支付宝）对此极其敏感，漏掉这步大概率白屏或跳错
popstate 回调里怎么知道是后退还是前进
event 对象本身没有 direction 字段，必须自己维护一个位置指针：
let historyIndex = history.length;
window.addEventListener('popstate', () => {
const newIndex = history.length;
if (newIndex historyIndex) {
console.log('前进');
}
historyIndex = newIndex;
});
注意：history.length 是会话内总条目数（含已销毁的），不能当绝对序号用，只适合做相对比较；而且它在不同浏览器中可能有微小差异，别拿它做精确索引。
popstate 中如何驱动视图更新（尤其是 body）
popstate 只通知“历史变了”，不负责更新 UI。你要主动从 event.state 里取数据，并同步到 DOM 或框架状态：
- 直接操作
body：比如document.body.className = 'page-' + (event.state?.page || 'home') - 用
dataset存字段：document.body.dataset.tabId = event.state?.tabId || '' - 在 React/Vue 项目中，别直接改
body—— 应把event.state同步进全局状态（如 Context、Zustand 或 Pinia），再由组件响应式驱动 - 首次加载时
event.state是undefined，所以初始化垫底那步不能省，否则后续所有逻辑都缺上下文
最常被忽略的点是：你以为监听了就能响应，其实真正起作用的是你写的每一条 pushState 和 replaceState —— 它们才是历史栈的“锚点”，popstate 只是那个敲门的人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
