javascript history api 支持无刷新操作浏览器历史，含 pushstate（添加记录）、replacestate（替换记录）和 popstate 事件监听（响应前进/后退），用于 spa 路由与状态管理，受同源策略限制。
JavaScript 通过 History API 提供了对浏览器历史记录的可控操作，比如前进、后退、添加或替换当前页的历史条目，而无需刷新页面。它主要用于单页应用（SPA）实现无跳转的路由切换和状态管理。
pushState()：添加新历史记录
在当前会话中新增一条历史记录，不触发页面刷新，URL 改变但不发起请求。
- 语法：
history.pushState(state, title, url) - state：任意可序列化的对象，随该记录保存，后续 popstate 事件中可读取
-
title：目前大多数浏览器忽略此参数，可传空字符串
"" - url：相对路径或绝对路径，必须同源，否则报错；仅改变地址栏，不加载资源
示例：history.pushState({page: "about"}, "", "/about");
执行后地址栏变为 /about，但页面内容不变；点击浏览器“后退”会回到上一页，且触发 popstate 事件。
replaceState()：替换当前历史记录
用新状态覆盖当前历史条目，不会新增记录，适合更新 URL 或状态但不想让用户多按一次“后退”。
- 语法：
history.replaceState(state, title, url) - 参数含义与
pushState相同 - 常用于修正初始 URL、隐藏敏感参数、或 SPA 初始化时同步路由状态
示例：history.replaceState({loaded: true}, "", "/home?ref=internal");
地址栏更新，但历史栈长度不变。
监听 popstate 事件：响应浏览器前进/后退
当用户点击前进/后退按钮，或调用 history.back()/history.forward() 时触发，用于同步 UI 状态。
立即学习“Java免费学习笔记（深入）”；
- 事件对象的
state属性即为 push/replace 时传入的状态对象 - 注意：页面首次加载时不会触发 popstate；只有通过 History API 或导航按钮触发的历史变化才触发
示例：
window.addEventListener("popstate", (e) => {<br> console.log("当前状态：", e.state);<br> if (e.state?.page === "about") renderAboutPage();<br>});
其他常用方法与注意事项
-
history.back()/history.forward()/history.go(n)：模拟用户导航行为 -
history.length：只读属性，返回当前会话中的历史条目数（含当前页） - 所有 History API 操作都受同源策略限制，跨域 URL 会抛出安全错误
- URL 中的 hash（
#）变化不会触发 popstate，需监听hashchange事件
基本上就这些。用好 pushState 和 popstate，就能让单页应用拥有接近原生的导航体验。
