pushState()新增历史记录，replaceState()替换当前记录；二者均不刷新页面但影响历史栈不同，且state对象仅在popstate事件中可用，需谨慎处理导航与状态同步。
直接说结论：history.pushState() 和 history.replaceState() 是前端控制浏览器历史栈最常用、也最安全的两个方法；history.back()、history.forward() 和 history.go() 属于导航类操作，但容易触发意外跳转或白屏，需谨慎使用。
pushState 和 replaceState 的核心区别在哪
两者都用来修改 URL 且不刷新页面，但对历史栈的影响完全不同：
-
pushState()会在历史栈中「新增一条记录」，用户点后退会回到上一个状态 -
replaceState()则是「替换当前记录」，不会增加新条目，适合更新 URL 参数但不想让用户退回当前页之前的状态（比如筛选条件变化） - 两个方法的第一个参数都是
state对象，它会被序列化存入历史项，但不会自动触发事件——只有用户手动导航（如点后退）时，popstate事件才携带这个对象 - 第二个参数（
title）在现代浏览器中基本被忽略，传空字符串''即可 - 第三个参数（
url）必须是同源的相对路径或绝对路径；跨域会直接抛出SecurityError
history.pushState({ page: 'list', filter: 'active' }, '', '/app/list?status=active');
history.replaceState({ page: 'detail', id: 123 }, '', '/app/item/123');
popstate 事件怎么监听才可靠
popstate 只在用户触发浏览器导航（后退/前进/go()）时触发，不是每次 pushState 都会触发——这点常被误解。
- 必须用
addEventListener('popstate', handler)注册，window.onpopstate兼容性差且只能绑定一个 - 事件对象的
event.state就是当初传入pushState或replaceState的 state 对象，注意它可能是null（比如用户从外部链接直接进入该页） - 不要在
popstate里再调用pushState，否则可能造成无限循环（尤其配合 React Router 等库时） - 如果页面有异步加载逻辑（如拉取详情），应在
popstate触发后检查location.pathname或location.search，而不是只依赖event.state，因为后者可能丢失
window.addEventListener('popstate', (event) => {
const state = event.state;
if (state && state.page === 'detail') {
loadItem(state.id);
} else {
// 回退到非 SPA 页面？需 fallback 处理
console.log('no valid state, check URL:', location.href);
}
});
history.back() 为什么有时会白屏或跳错
这不是 bug，而是历史栈行为本身不可控导致的：
立即学习“Java免费学习笔记（深入）”；
-
history.back()等价于history.go(-1)，它只是告诉浏览器“去上一项”，但那一项可能是：一个已销毁的 React 组件、一个 404 页面、甚至一个跨域的外链——此时页面无法还原，就表现为白屏或跳转失败 - 调用前无法预判目标页是否还存活或是否同源，所以不能把它当“返回上一页内容”的工具，只能当“模拟点击浏览器后退按钮”
- 在单页应用中，更推荐用路由库的
router.goBack()（如 React Router 的useNavigate返回函数），它们内部做了状态保持和 fallback - 如果必须手写，建议加 try/catch 并监听
pagehide/visibilitychange做轻量缓存，但别指望完全避免白屏
真正难的不是调用哪个 API，而是理解 state 对象不会持久化、URL 改变不等于视图更新、以及浏览器历史栈本质上是个黑盒——你只能推它、换它、监听它，但没法查它里面到底有几条记录，也没法删掉某一条。