JavaScript通过History API实现无刷新页面导航，支持pushState添加历史记录、replaceState替换当前记录、popstate监听前进后退、back/forward/go手动控制跳转。
JavaScript 通过 History API 实现页面级的历史记录管理，无需刷新就能控制前进、后退，还能动态修改地址栏 URL 并保存状态。
使用 history.pushState() 添加新历史记录
每次调用 pushState()，浏览器会在历史栈中新增一条记录，但不触发页面跳转：
- 语法：
history.pushState(state, title, url) -
state是一个可序列化的对象，随该记录一起保存（如 { page: 'detail', id: 123 }） -
title当前多数浏览器忽略，传空字符串即可（''） -
url是相对路径或绝对路径，必须同源，否则报错；它会更新地址栏，但不发起请求
示例：点击商品卡片跳转详情页但不刷新
document.querySelector('.item').addEventListener('click', () => {
history.pushState({ page: 'product', id: 456 }, '', '/product/456');
loadProductDetail(456); // 手动渲染内容
});
使用 history.replaceState() 替换当前历史记录
与 pushState() 类似，但不新增记录，而是替换当前项。适合修正 URL 或更新 state 而不增加返回层级：
立即学习“Java免费学习笔记（深入）”；
- 常用于表单提交后更新 URL，避免用户重复提交
- 也用于单页应用中「搜索参数变更」但不想多出一条历史记录时
示例：筛选条件变化时更新 URL
function updateFilter(query) {
const newState = { ...currentHistoryState, filter: query };
history.replaceState(newState, '', `?q=${query}`);
applyFilter(query);
}
监听 popstate 事件响应前进/后退
用户点击浏览器“后退”或“前进”按钮，或调用 history.back()/history.forward() 时，会触发 popstate 事件：
- 事件对象的
state属性即为对应历史记录中保存的 state 对象 - 需在页面初始化时注册一次监听，全局生效
- 注意：首次加载页面不会触发 popstate，即使有 state
示例：
window.addEventListener('popstate', (event) => {
if (event.state?.page === 'product') {
loadProductDetail(event.state.id);
} else if (event.state?.page === 'list') {
renderProductList();
}
});
手动控制前进与后退
除了用户点击，也可用 JS 主动跳转：
-
history.back()：等价于点击后退按钮 -
history.forward()：等价于点击前进按钮 -
history.go(n)：n 为正数前进 n 步，负数后退 |n| 步（如go(-2)后退两步）
注意：这些方法仅在历史栈中有足够记录时才有效，否则静默失败（无报错）。
