History API 允许在不刷新页面的情况下操作浏览器历史记录，支持查看记录数量与状态、前进后退跳转、添加或替换历史条目，并通过监听 popstate 事件响应导航变化，是实现单页应用路由的核心技术。
JavaScript 提供了 History API，让我们可以在不刷新页面的情况下操作浏览器的历史记录，实现前进、后退、跳转以及修改 URL 而不重新加载页面。这对于构建单页应用（SPA）非常关键。
1. 查看历史记录信息
通过 window.history 可以访问 History 对象，它包含一些基本信息：
- history.length：返回历史记录的条目数量（包括当前页面）
- history.state：返回当前历史记录的状态对象（由 pushState 或 replaceState 设置）
例如：
console.log(history.length); // 输出历史记录条数 console.log(history.state); // 输出当前状态对象
2. 导航控制：前进、后退与跳转
History API 提供了几种方法来控制用户的导航行为：
立即学习“Java免费学习笔记（深入）”；
- history.back()：等同于点击“后退”按钮
- history.forward()：等同于点击“前进”按钮
- history.go(n)：跳转到历史记录中的某一个页面，n 可以为正数（前进）、负数（后退）或字符串（实验性）
示例：
history.back(); // 后退一页 history.forward(); // 前进一页 history.go(-2); // 后退两页 history.go(1); // 前进一页
3. 添加和修改历史记录
使用 pushState() 和 replaceState() 可以动态添加或替换历史记录条目，常用于单页应用中更新 URL 而不刷新页面。
pushState(state, title, url)：
- state：一个对象，用于保存与该历史记录相关联的状态数据
- title：当前大多数浏览器忽略这个参数，可传空字符串
- url：新的 URL（必须同源）
示例：
history.pushState(
{ page: 'home' },
'',
'/home'
);
这会将 URL 改为 /home，并新增一条历史记录，但不会触发页面加载。
replaceState(state, title, url)：
与 pushState 类似，但它替换当前历史记录条目，而不是新增一条。
history.replaceState(
{ page: 'edit' },
'',
'/edit'
);
适用于在用户未察觉的情况下修正 URL，比如从临时 ID 跳转到正式路径。
4. 监听历史变化
当用户点击前进/后退按钮，或调用 history.back() 等方法时，会触发 popstate 事件。你可以监听它来响应 URL 变化。
window.addEventListener('popstate', function(event) {
console.log('当前状态:', event.state);
// 根据 state 或当前 URL 更新页面内容
});
注意：只有在浏览器**导航到不同历史条目**时才会触发 popstate，调用 pushState 或 replaceState 不会触发。
结合 pushState 和 popstate，可以实现完整的前端路由逻辑。
基本上就这些。掌握 History API 能让你更好地控制用户在单页应用中的浏览体验，实现平滑的页面切换和 URL 管理。关键是理解 pushState 新增记录，replaceState 替换当前，以及 popstate 响应回退操作。不复杂但容易忽略细节。
