JavaScript history API 通过 pushState 和 replaceState 操作浏览器历史栈而不刷新页面，配合 popstate 事件响应前进后退，实现 SPA 路由与状态管理；需注意同源限制、用户交互调用要求及服务端 fallback 配置。
JavaScript 的 history API 允许你在不刷新页面的前提下操作浏览器的历史记录，是实现单页应用（SPA）路由、前进后退控制和状态管理的关键工具。核心在于它不跳转 URL，而是改变地址栏并维护历史栈，同时可关联任意状态数据。
pushState：添加新历史记录项
向历史栈中插入一条新记录，用户点击“后退”会回到上一项，但不会触发页面刷新。
- 语法：
history.pushState(state, title, url) -
state：任意可序列化的 JS 对象（如
{page: 'detail', id: 123}），会在popstate事件中被读取 -
title：目前大多数浏览器忽略该参数，传空字符串
''即可 - url：相对或绝对路径，必须同源；仅改变地址栏显示，不发起请求
例如：history.pushState({tab: 'settings'}, '', '/settings') 会让地址栏变成 /settings，且可在后退时恢复该状态。
replaceState：替换当前历史记录项
用新状态和 URL 替换当前历史栈顶项，不新增条目，适合更新当前页状态而不留下冗余记录。
立即学习“Java免费学习笔记（深入）”；
- 语法：
history.replaceState(state, title, url) - 常用于表单提交后修正 URL，或动态更新搜索参数（如分页、筛选）
- 例如：
history.replaceState({q: 'js', page: 2}, '', '?q=js&page=2')不增加历史长度，但更新了地址栏和状态
监听 popstate：响应浏览器前进/后退
当用户点击前进、后退按钮，或调用 history.back()/history.forward() 时触发，是还原页面状态的核心时机。
- 监听方式：
window.addEventListener('popstate', event => { ... }) -
event.state就是之前通过pushState或replaceState传入的状态对象 - 注意：首次加载页面或直接访问 URL 时不会触发
popstate；需在初始化时手动读取history.state
其他实用方法与注意事项
history.back()、history.forward()、history.go(n) 可编程控制导航，但它们会触发 popstate 事件。
-
history.length返回历史栈中条目数（含当前页），但无法读取具体 URL 或状态 - 所有
pushState/replaceState操作都受同源策略限制 - 避免在非用户交互上下文中调用（如异步回调里直接 push），部分浏览器会静默失败或报错
- 服务端需配置 fallback：当用户直接访问某个 SPA 子路由（如
/user/5）时，应返回主 HTML 文件，由前端路由接管
基本上就这些。用好 pushState + popstate 就能支撑起大部分前端路由逻辑，不复杂但容易忽略状态同步和初始加载的处理。
