History API 是实现 SPA 前进/后退体验的核心技术，含 pushState（添加记录）、replaceState（替换当前记录）及 popstate 事件监听，要求同源、state 可序列化且大小受限，刷新后需手动恢复状态。
JavaScript 中的历史记录 API（History API）是一组用于操作浏览器会话历史的接口，允许你在不刷新页面的前提下修改 URL、添加新记录或跳转到已有状态，是实现单页应用（SPA）中“前进/后退”体验的核心技术。
history.pushState()：添加新历史记录
它向浏览器历史栈中插入一条新记录，同时更新地址栏 URL（但不触发页面加载），常用于路由切换时保留用户浏览痕迹。
- 语法：
history.pushState(state, title, url) -
state：一个可序列化的对象，随该记录一起保存，后续通过
popstate事件获取 -
title：目前大多数浏览器忽略该参数，传空字符串
""即可 -
url：相对路径或绝对路径，必须同源，否则抛错；例如
"./user/123"或"/search?q=js"
示例：history.pushState({page: "user", id: 123}, "", "/user/123");
history.replaceState()：替换当前历史记录
与 pushState 类似，但它不新增记录，而是直接替换当前历史项。适合更新 URL 但不想让用户多按一次“后退”才能离开当前页的场景，比如表单筛选条件变化时更新地址栏。
立即学习“Java免费学习笔记（深入）”；
- 语法相同：
history.replaceState(state, title, url) - 典型用途：修改查询参数、滚动位置同步、深链接修正
监听 history 变化：popstate 事件
当用户点击浏览器“后退”或“前进”按钮，或调用 history.back()、history.forward() 时，会触发 popstate 事件。注意：仅对由 pushState 或 replaceState 创建的记录生效，初始页面加载不会触发。
- 监听方式：
window.addEventListener("popstate", (e) => { console.log(e.state); }); -
e.state就是之前传入pushState或replaceState的 state 对象 - 需在此事件中手动渲染对应视图（如加载新内容、切换组件）
其他实用方法与注意事项
history.length 返回当前会话中的历史条目数（含当前页），但无法读取具体 URL 或 state；history.go(n)、back()、forward() 可编程跳转。
- URL 必须同源，跨域调用会报错
- state 对象大小有限制（通常约 640KB），避免存大量数据
- 刷新页面后，state 仍存在，但页面需自行根据 URL 恢复状态（服务端也要支持该路由）
- SEO 友好性依赖服务端配置（如使用 History 模式时需配置 fallback 路由）
基本上就这些。用好 History API，就能让 SPA 的导航像多页网站一样自然，又保持单页的流畅体验。
