通过History API实现无刷新导航，使用pushState添加历史记录、replaceState修改当前记录，并监听popstate事件响应浏览器前进后退，结合AJAX加载内容与路由拦截，可构建单页应用的平滑切换体验。
通过JavaScript控制浏览器历史记录实现无刷新导航，主要依赖于 History API。它允许你在不重新加载页面的情况下修改当前会话的历史记录，从而实现平滑的页面切换体验，常用于单页应用（SPA）。
使用 pushState 添加新历史记录
pushState() 方法可以向浏览器历史栈中添加一条新记录，并更新当前 URL，但不会刷新页面。
语法：history.pushState(state, title, url);
- state：一个对象，用于保存与该状态相关的信息（如页面数据）
- title：当前大多数浏览器忽略这个参数，可传空字符串
- url：新的URL（必须同源）
示例：
立即学习“Java免费学习笔记（深入）”；
history.pushState({page: 'home'}, '', '/home');
执行后，地址栏变为 /home，但页面未刷新，同时 state 对象可在后续通过 popstate 获取。
使用 replaceState 修改当前记录
如果你不想新增历史条目，而是想替换当前的记录，使用 replaceState()。
例如用户在搜索框输入内容时动态更新URL但不增加返回层级：
history.replaceState({query: 'hello'}, '', '?q=hello');
这会改变当前URL，但不会在历史中新增条目，点击后退仍回到上一个有效页面。
监听浏览器前进后退：popstate 事件
当用户点击浏览器的“前进”或“后退”按钮时，会触发 popstate 事件。你需要监听它来恢复对应页面状态。
示例：
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('popstate', function(event) {
if (event.state) {
console.log('当前状态:', event.state);
// 根据 state 数据渲染对应内容
} else {
// 初始页面或无 state 的情况
}
});
注意：只有通过 pushState 或 replaceState 添加的记录才会携带 state 对象。直接访问或刷新页面时 state 为 null。
实际应用场景建议
在构建无刷新导航时，通常结合以下逻辑：
- 拦截链接点击事件，阻止默认跳转
- 通过 AJAX 或其他方式加载新内容
- 调用 pushState 更新 URL 和历史记录
- 监听 popstate，在用户后退时还原内容
例如：
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const url = this.getAttribute('href');
// 模拟加载内容
fetchContent(url).then(data => {
displayContent(data);
history.pushState({url, data}, '', url);
});
}
});
基本上就这些。History API 让你完全掌控导航行为，配合动态内容加载，就能实现流畅的无刷新体验。关键是记得处理 popstate 和服务端路由的 fallback，避免用户刷新时 404。
