使用History API可实现单页应用无刷新跳转。通过pushState添加历史记录并更新URL，replaceState修改当前记录而不新增条目，onpopstate监听前进后退操作，结合动态内容加载即可同步页面状态与地址栏，支持浏览器导航，提升用户体验。
单页应用（SPA）中，页面内容更新时不想重新加载整个页面，同时还要让浏览器地址栏同步变化、支持前进后退，这就需要用到 JavaScript 的 History API。它允许我们在不刷新页面的前提下，修改 URL 并管理浏览历史。
History API 核心方法
History 接口提供了几个关键方法来控制浏览器的历史记录栈：
- history.pushState()：添加一条新记录到历史栈，并更新当前 URL
- history.replaceState()：替换当前历史记录条目，不新增记录
- window.onpopstate：监听前进/后退按钮触发的 history 变化
这些方法配合 AJAX 或现代前端框架的数据更新机制，就能实现真正的“无刷新跳转”。
使用 pushState 实现页面跳转
当你想模拟一次页面跳转但不刷新页面时，可以这样写：
立即学习“Java免费学习笔记（深入）”；
// 假设通过点击事件触发
function navigateTo(url, title, data) {
// 更新状态
history.pushState(data, title, url);
// 根据新 URL 加载内容（比如通过 fetch）
loadContent(url);
}
// 绑定链接点击
document.addEventListener('click', function(e) {
const link = e.target.closest('a[data-navigate]');
if (link && link.href) {
e.preventDefault();
navigateTo(link.href, '', { path: link.pathname });
}
});
这时浏览器地址会变，用户也能后退，但页面没有刷新。
监听浏览器前进后退：onpopstate
用户点击返回按钮时，pushState 添加的记录会被弹出，此时需要还原对应页面状态：
window.addEventListener('popstate', function(event) {
if (event.state) {
// 根据保存的状态数据恢复页面
loadContent(location.pathname);
} else {
// 处理初始页面或无状态情况
showHome();
}
});
注意：只有通过 pushState 或 replaceState 添加的记录才会携带 state 数据，直接访问或刷新页面时 state 为 null。
replaceState 的适用场景
如果你只想更新当前 URL 而不留下历史痕迹，比如表单提交后的重定向，可以用 replaceState：
// 比如搜索页参数更新
history.replaceState(
{ query: 'new-search' },
'',
'/search?q=new-search'
);
这样不会增加新的历史条目，用户后退会跳过这个状态，直接回到上一个有效页面。
基本上就这些。History API 配合动态内容加载，是现代网页实现流畅导航的核心技术之一。不复杂但容易忽略细节，比如 state 数据大小限制和 SEO 处理，实际项目中还需结合路由库或服务端渲染做更完整的设计。
