JavaScript history API 用于 SPA 无刷新导航，核心是管理 URL 和历史栈：pushState 添加记录，replaceState 替换当前记录，popstate 监听用户前进/后退并响应更新界面。
JavaScript 通过 history API 提供了对浏览器会话历史的可控访问，常用于单页应用（SPA）中实现无刷新跳转、前进后退逻辑和 URL 状态同步。核心不是改变页面内容，而是管理地址栏 URL 和历史栈，配合路由逻辑使用效果最佳。
pushState()：添加新记录到历史栈
在不刷新页面的前提下，向历史记录中插入一条新状态，并更新当前 URL（可跨路径，但受同源策略限制）。
-
语法：
history.pushState(state, title, url) - state：任意可序列化的对象，随该记录保存，后续 popstate 事件中可获取
-
title：目前多数浏览器忽略该参数，传空字符串
""即可 - url：相对或绝对路径（必须同源），只影响地址栏显示，不触发资源加载
例如：history.pushState({page: "about"}, "", "/about") 会让地址栏变成 /about，但不会请求该页面。
replaceState()：替换当前历史记录
与 pushState() 类似，但不新增记录，而是修改当前历史项（比如表单提交后清理查询参数，或修正错误 URL）。
立即学习“Java免费学习笔记（深入）”；
- 语法相同：
history.replaceState(state, title, url) - 调用后，用户点击「后退」不会回到上一个 URL，而是回到再上一条
- 适合用于更新状态但不想增加导航深度的场景
popstate 事件：监听浏览器前进/后退操作
当用户点击前进、后退按钮，或调用 history.back()/history.forward() 时触发，是响应式更新页面内容的关键入口。
- 事件对象的
event.state包含对应历史项的 state 数据 - 需手动根据 state 或当前 URL 重绘界面（如加载对应组件、滚动位置）
- 注意：仅通过 JS 调用
pushState/replaceState不会触发 popstate；只有用户导航或back/forward才触发
示例监听写法：window.addEventListener('popstate', (e) => { console.log(e.state); renderPage(e.state); });
其他实用方法和属性
history.length：返回当前会话历史总条数（包括当前页），可用于判断是否能后退（但不可靠，因隐私策略限制精确值）history.go(n)：跳转到历史栈中第 n 条（n=1 是前进，n=-1 是后退）history.back() / history.forward()：语义化封装，等价于 go(-1) 和 go(1)
⚠️ 注意：所有 history 操作均无法跨域，且不能修改主域名；URL 中 hash 部分的变化（如 #section1）不会触发 popstate，需监听 hashchange 事件。
基本上就这些。实际开发中，通常封装成路由类，统一管理 push/replace + popstate 响应 + URL 解析，避免重复逻辑。不复杂但容易忽略 state 的合理设计和事件监听的及时绑定。
