history.pushState 修改 URL 和历史栈但不刷新页面，需手动渲染视图；popstate 仅在浏览器前进/后退时触发，不响应 pushState；replaceState 不新增历史条目且不触发 popstate。
history.pushState 为什么没刷新页面但 URL 变了
history.pushState 是浏览器原生 API，它只修改地址栏 URL 和历史栈，不触发页面重载或路由跳转。常见误解是以为它会自动加载新内容——其实不会，你得自己用 JS 渲染对应视图（比如 AJAX 拉数据、更新 DOM）。
容易踩的坑：
- 调用后没同步更新页面内容，用户看到 URL 变了但页面还是旧的
- 传入的
state对象过大（比如含 DOM 节点或函数），导致序列化失败或内存泄漏 - 没监听
popstate事件，导致浏览器前进/后退按钮失效
推荐写法：
history.pushState({ page: 'detail', id: 123 }, '', '/item/123');
注意第三个参数必须是同源相对路径，不能是完整 URL（如 https://...），否则抛错 SecurityError。
立即学习“Java免费学习笔记（深入）”；
popstate 事件监听不到后退操作
popstate 只在用户点击浏览器前进/后退按钮，或调用 history.back() / history.forward() 时触发，**不会**在 pushState 或 replaceState 时触发。
常见错误：
- 监听写在异步回调里（如 fetch 完成后），导致绑定时机太晚，错过首次 popstate
- 用箭头函数绑定，导致 this 绑定丢失，无法访问组件实例状态
- 没做防抖，快速连点后退时多次触发，造成重复渲染
正确注册方式：
window.addEventListener('popstate', (event) => {
const { state } = event;
renderPage(state); // 你自己实现的页面渲染逻辑
});
history.replaceState 和 pushState 的关键区别
两者都改变 URL 和 history.state，但 replaceState 不新增历史记录条目，而 pushState 会。这意味着：
- 用
replaceState修改当前页 URL（如表单提交后清理 query 参数），用户按后退不会回到修改前的状态 - 登录跳转后想禁止回退到登录页？用
replaceState替换登录页的历史项 -
replaceState不会触发popstate，这点和pushState一致
典型场景示例：
// 提交搜索后隐藏 ?q=xxx，但保留结果页 history.replaceState(null, '', '/search');
SPA 中 history 管理的兼容性与 fallback 注意点
现代浏览器都支持 pushState，但 IE10 是底线。如果需兼容 IE9 及更早版本，必须降级到 hash 模式（location.hash），且服务端要配置所有路径返回 index.html，否则刷新 404。
容易被忽略的细节：
- Vue Router / React Router 默认用
createWebHistory，但部署到子目录时需配base，否则pushState写入的路径错位 - 服务端 Nginx/Apache 配置 rewrite 规则时，不能漏掉静态资源（js/css/img），否则它们也会被重定向到首页
- 某些安卓 WebView（尤其旧版 UC）对
state对象大小敏感，超过 ~640KB 可能静默失败
判断是否支持的最小验证：
if (!window.history || !window.history.pushState) {
// 降级处理：跳转或启用 hash 模式
}
真正难的不是调用 API，而是让 URL、history.state、DOM 状态三者始终同步——尤其是用户手敲地址、刷新、新开标签页这些绕过 JS 控制的路径。
