pushState 和 replaceState 都不触发页面刷新，但前者新增历史记录、后者替换当前项；state 对象不暴露于 URL 且有大小限制；popstate 不在 push/replace 时触发，需手动处理首次加载；视图更新须自行实现，服务端需配置 fallback。
pushState 和 replaceState 的区别在哪
关键不是“能不能改 URL”，而是“会不会触发页面刷新”——pushState 和 replaceState 都不会刷新，但前者会在历史栈里新增一条记录，后者只替换当前条目。
常见错误是误用 replaceState 导致用户点浏览器后退键失效（比如登录跳转后想禁止返回登录页，但没考虑路由状态同步）。
-
pushState适合导航：从 /home → /detail/123，用户可后退回到 /home -
replaceState适合修正：URL 是 /#login，但你想抹掉哈希、改成 /login 且不增加历史项 - 两个方法第三个参数是
state对象，它会被存进历史记录，但**不会序列化到 URL 中**，所以不能依赖它传敏感数据 - state 大小有限制（Chrome 约 640KB），超限会抛
SecurityError
监听 popstate 事件要注意什么
popstate 只在用户点击浏览器前进/后退按钮，或调用 history.back() 等 API 时触发，**不会在 pushState/replaceState 调用时触发**。
容易踩的坑是：注册了监听但没做初始路由匹配，导致页面加载时显示空白或旧视图。
立即学习“Java免费学习笔记（深入）”；
- 必须在页面初始化时手动执行一次路由匹配（比如调用
router.go(location.pathname)） -
event.state是 push/replace 时传入的 state 对象，但首次加载时它是null，别直接解构 - 不要在
popstate回调里再调用pushState，否则可能触发无限循环（尤其配合 React Router 等库时） - 移动端 Safari 对
popstate触发时机有延迟，建议加防抖或结合pageshow补充判断
如何避免 history.pushState 后页面不更新
调用 pushState 只改 URL 和历史栈，**完全不管 DOM 或数据**。所谓“单页应用跳转”，其实是你得自己写逻辑去渲染新内容。
history.pushState({ page: 'about' }, '', '/about');
// 此时页面还是原来的 HTML，你需要：
document.getElementById('app').innerHTML = '<h1>About</h1>';
// 或触发 Vue/React 的路由响应
- 必须配套更新视图：要么手动操作 DOM，要么调用框架的路由方法（如
vue-router的router.push） - 如果用了前端路由库，就别直接裸调
history.pushState，否则状态和 UI 会脱节 - 服务端要配置 fallback：所有非静态资源请求都返回
index.html，否则用户直接访问 /detail/123 会 404 - 注意 SEO：仅靠 client-side routing 不会被搜索引擎抓取内容，需配合 SSR 或预渲染
history.state 在 SPA 中怎么安全使用
history.state 是当前历史记录项绑定的状态对象，但它**只在当前 tab 生命周期内有效**，刷新后就丢失（除非你用 sessionStorage 持久化）。
典型误用：把 token 或表单草稿存在 history.state 里，结果用户刷新页面就没了。
- 适合存轻量、临时的 UI 状态：比如滚动位置、搜索关键词、tab 选中索引
- 不适合存业务关键数据：token、用户权限、未提交表单 —— 这些该走
localStorage或服务端 session - 跨 tab 不共享：A tab 的
history.state对 B tab 完全不可见 - 调试时可用
console.log(history.state)查看当前值，但上线前记得删掉
