History API 的 pushState() 和 replaceState() 可不刷新页面修改 URL 并管理历史栈，但需手动监听 popstate 事件并更新视图；两者参数相同，区别在于 pushState() 新增历史记录，replaceState() 替换当前记录；popstate 仅在用户导航时触发，首次加载需手动检查 history.state。
JavaScript 操作浏览器历史记录，核心就是 History API，它不刷新页面就能改变 URL 并管理导航状态——但直接调用 pushState() 或 replaceState() 不会触发页面重载，也不会自动触发路由逻辑，这点必须手动处理。
为什么 pushState() 后 URL 变了但页面没更新？
这是最常踩的坑：pushState() 只修改历史栈和地址栏，不触发任何事件或跳转行为。浏览器不会去请求新 URL，也不会重新渲染页面。
- 你得自己监听
popstate事件来响应后退/前进 - 你也得自己根据新 URL 更新视图（比如渲染组件、加载数据）
- 如果用的是前端路由库（如 React Router、Vue Router），它们已封装了这层逻辑；纯 JS 就得手写
pushState() 和 replaceState() 的关键区别
两者参数完全一样：state 对象、title（目前多数浏览器忽略）、url（相对路径，需同源），但行为不同：
-
pushState()在历史栈末尾新增一条记录，用户点「后退」会回到上一个状态 -
replaceState()替换当前历史记录，不增加新条目，适合修正 URL 但不想留下可回退的痕迹（比如表单提交后清理 query 参数） - 注意：
url必须同源，否则抛出SecurityError
如何正确监听浏览器前进/后退？
靠 popstate 事件，但它只在用户点击前进/后退按钮、或调用 history.back() 等导航方法时触发，不会因 pushState() 自动触发。
立即学习“Java免费学习笔记（深入）”；
- 必须在页面初始化时就绑定：
window.addEventListener('popstate', handler) -
event.state是你传给pushState()或replaceState()的那个对象，不是 URL - 首次加载页面时不会触发
popstate，即使 URL 带有 state —— 需要手动读取history.state初始化视图
window.addEventListener('popstate', (e) => {
const state = e.state;
if (state?.page === 'detail') {
renderDetail(state.id);
}
});
// 页面加载后也要检查当前 state
if (history.state?.page === 'detail') {
renderDetail(history.state.id);
}
URL 改变但不触发 popstate 的常见情况
除了你主动调用 pushState()，还有几种操作会改 URL 却不触发该事件：
- 直接修改
location.hash（会触发hashchange，不是popstate） - 设置
location.href或location.assign()（整页跳转，不走 History API） - 调用
history.go(n)且目标条目没有关联 state（比如初始页面）
如果你依赖统一的状态管理，别混用 hash 路由和 History API；选一种并坚持到底。同个应用里交叉使用，容易让 history.state 和实际 URL 脱节。
