JavaScript中History API通过pushState()、replaceState()和popstate事件实现SPA路由控制：pushState添加历史记录并改URL，replaceState替换当前记录，popstate监听前进/后退并读取state。
JavaScript 中通过 History API 可以在不刷新页面的前提下操作浏览器的历史记录，实现单页应用（SPA）的路由跳转和状态管理。核心方法是 pushState()、replaceState() 和 popstate 事件。
使用 pushState 添加新历史记录
pushState() 会在历史栈中新增一条记录，同时改变 URL（但不触发页面加载）。
- 语法：
history.pushState(state, title, url) -
state：一个可序列化的对象，随该记录保存，后续可通过event.state获取 -
title：目前大多数浏览器忽略此参数，可传空字符串"" -
url：新的相对或绝对路径（需同源），仅影响地址栏，不发起请求
示例：history.pushState({page: "about"}, "", "/about");
执行后地址栏变为 /about，点击浏览器“后退”会回到上一页面，且触发 popstate 事件。
用 replaceState 替换当前历史记录
replaceState() 不新增记录，而是替换当前历史项，适合更新状态但不想让用户多按一次“后退”。
- 语法与
pushState相同：history.replaceState(state, title, url) - 常用于表单提交后更新 URL，或修正初始 URL（如从
/?ref=abc清理为/）
示例：history.replaceState({search: "js"}, "", "/search?q=js");
监听 popstate 响应浏览器导航
当用户点击前进/后退按钮，或调用 history.back() 等方法时，会触发 popstate 事件，此时可读取 event.state 并更新页面内容。
立即学习“Java免费学习笔记（深入）”；
- 必须通过
window.addEventListener("popstate", handler)注册监听 -
popstate不会在pushState或replaceState调用时触发 -
event.state是之前传入的 state 对象（可能为null）
示例：
window.addEventListener("popstate", (e) => {<br> if (e.state?.page === "about") {<br> loadPage("about");<br> }<br>});
注意点和常见陷阱
History API 功能强大，但有几个关键细节容易出错：
- URL 必须同源，跨域调用会报安全错误
-
pushState和replaceState的url参数不能是纯 hash（如#section1），否则会静默失败；若只需 hash 变化，直接改location.hash - 服务端需配置支持：所有前端路由路径都应返回同一份 HTML（如
index.html），否则用户直接访问/about会 404 - 首次进入页面时，
history.state是初始值（通常为null），不代表有显式设置过 state
基本上就这些。掌握这三步（推、替、听），就能稳稳控制浏览器历史行为，不复杂但容易忽略细节。
