17370845950

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 并更新页面内容。

• 必须通过 window.addEventListener("popstate", handler) 注册监听
• popstate 不会在 pushState 或 replaceState 调用时触发
• event.state 是之前传入的 state 对象（可能为 null）

示例：

window.addEventListener("popstate", (e) => {
  if (e.state?.page === "about") {
    loadPage("about");
  }
});

注意点和常见陷阱

History API 功能强大，但有几个关键细节容易出错：

• URL 必须同源，跨域调用会报安全错误
• pushState 和 replaceState 的 url 参数不能是纯 hash（如 #section1），否则会静默失败；若只需 hash 变化，直接改 location.hash
• 服务端需配置支持：所有前端路由路径都应返回同一份 HTML（如 index.html），否则用户直接访问 /about 会 404
• 首次进入页面时，history.state 是初始值（通常为 null），不代表有显式设置过 state

基本上就这些。掌握这三步（推、替、听），就能稳稳控制浏览器历史行为，不复杂但容易忽略细节。