如何使用HTML pushState实现无刷新修改URL并实现history pushState？

本文共计915个文字，预计阅读时间需要4分钟。

直接调用 `history.pushState(null, '', '/new-path')` 似乎没有问题。但许多浏览器（如旧版 Chrome 和 Safari）在 `state` 参数为 `null` 时，会忽略该历史记录条目，导致点击后直接跳转而不是滚动到页面顶部。

真正安全的做法是传入一个非空、可序列化的对象：

• history.pushState({page: 'detail', id: 123}, '', '/item/123') —— 推荐，后续可通过 popstate 事件读取
• 不要省略 title 参数（第二个），哪怕只传空字符串 ''；部分 Android WebView 会因该参数为 undefined 报错
• URL 必须同源，跨域会静默失败，控制台无错误，但 location.href 不变

监听地址栏变化却没触发 popstate？确认事件绑定时机和页面加载状态

popstate 只在用户点击浏览器前进/后退按钮，或调用 history.back() 等 API 时触发，**不会**因 pushState 或 replaceState 自动触发。常见误判是以为“URL变了就得响应”，其实不是。