pushState在历史栈末尾添加新条目，replaceState则替换当前条目；二者均不触发页面刷新，需手动更新DOM，且state对象必须可序列化、URL须同源；popstate仅在用户导航时触发，首次加载需主动读取history.state初始化。
history API 不是“跳转工具”，而是“历史记录编辑器”——它能新增、替换、读取当前会话的历史条目，但不会自动触发页面刷新或 DOM 重绘；你得自己处理视图更新。
pushState 和 replaceState 的核心区别在哪
pushState 在历史栈末尾添加新条目，用户点「后退」会回到上一条；replaceState 则直接替换当前条目，不增加长度，适合更新 URL 但不想留下返回入口的场景（比如表单提交后修正地址栏）。
-
pushState会触发popstate事件仅当用户手动导航（后退/前进），不是调用时触发 - 两个方法第一个参数都是
state对象，必须是可序列化的（不能含函数、DOM 节点等），浏览器只保存其 JSON 序列化结果 -
state对象在popstate事件中通过event.state取出，它是唯一可靠的历史上下文来源，不要依赖 URL 解析来还原状态 - 第三个参数（URL）必须同源，跨域会抛
SecurityError；传入相对路径时，浏览器按当前 URL 解析，不是按 base 标签
监听 popstate 事件的正确姿势
别在页面加载完就立刻 addEventListener('popstate', ...) 然后假设 event.state 一定存在——首次加载页面时，popstate 不会触发；而用户从外站直达本页时，history.state 是 null，且无 popstate 事件。
- 必须主动读取
history.state初始化页面状态，而不是等事件 -
popstate事件只在浏览器导航（前进/后退/重载）时触发，不响应pushState/replaceState调用 - 移动端 Safari 对
popstate触发有延迟或丢失风险，建议加防抖 + fallback 到hashchange（如需兼容）
window.addEventListener('popstate', (event) => {
const state = event.state;
if (state && state.page === 'detail') {
renderDetail(state.id);
}
});
// 页面初始化时也要检查
if (history.state?.page === 'detail') {
renderDetail(history.state.id);
}
如何安全地更新 URL 而不触发重载
直接修改 location.href 或 location.assign() 会强制刷新；要用 pushState 或 replaceState 配合手动 DOM 更新。注意：URL 改变后，服务端未必能响应——前端路由必须配合服务器配置（如 Nginx 的 try_files）避免 404。
立即学习“Java免费学习笔记（深入）”；
- 只改 URL pathname？确保服务端对所有可能的前端路由都 fallback 到 index.html
- 想保留搜索参数又更新 path？先用
URL构造器解析，再拼新url.pathname + url.search，避免手动字符串拼接出错 - 调用
pushState后，若未同步更新 DOM，用户后退会看到“旧内容+新 URL”，这是最常见白屏原因
const url = new URL(window.location.href);
url.pathname = '/user/123';
url.searchParams.set('tab', 'settings');
history.pushState(
{ page: 'user', id: 123, tab: 'settings' },
'',
url.toString()
);
renderUserPage(123, 'settings');
history.state 为什么有时是 null
这不是 bug，是规范行为：history.state 仅在通过 pushState/replaceState 设置后才有值；页面硬加载（F5、外链进入、书签打开）时，它就是 null。别把它当全局状态容器——它只是浏览器为你缓存的那一份「快照」。
- 不要在
pushState前检查history.state是否为空来决定逻辑分支，应统一用初始 state 或 URL 解析兜底 - SSR 页面首次加载时，服务端可注入
window.__INITIAL_STATE__，前端启动时优先取它，再 fallback 到history.state - 如果用了 React Router / Vue Router，它们已封装这些细节，直接读
useLocation().state更安全
真正难的不是调用 API，而是让 URL、history.state、DOM 状态三者始终严格同步——漏掉任意一环，用户就会遇到后退失灵、URL 错乱或白屏。
