核心是使用History API实现无刷新导航。通过pushState添加历史记录并更新URL，replaceState替换当前记录，结合popstate事件监听前进后退，动态更新页面内容，实现单页应用流畅跳转，需注意同步页面状态与URL、阻止默认跳转及服务端配置支持。

利用JavaScript操作浏览器历史记录实现无刷新导航，核心是使用 History API。通过它可以在不重新加载页面的情况下修改URL并管理用户的浏览历史，从而提升用户体验，实现类似单页应用（SPA）的流畅跳转效果。

使用 pushState 添加新历史记录

当你想在用户点击某个链接或执行某个操作时更新URL但不刷新页面，可以使用 history.pushState() 方法。

该方法会向浏览器历史栈添加一条新记录，并更新地址栏中的URL，但不会触发页面加载。

语法如下：

history.pushState(state, title, url);

• state：一个对象，用于保存与该历史记录相关联的状态数据（可为空）
• title：当前大多数浏览器忽略这个参数，可传空字符串
• url：新的URL（必须同源）

示例：

// 模拟点击按钮切换内容
document.getElementById('about-link').addEventListener('click', function(e) {
  e.preventDefault();
  // 更新内容
  document.getElementById('content').innerHTML = '
关于我们
公司简介...
';
  // 更新URL
  history.pushState({page: 'about'}, '', '/about');
});

使用 replaceState 修改当前记录

如果你不想新增一条历史记录，而是想替换当前的URL（比如表单分步填写中更新步骤），可以使用 history.replaceState()。

例如在搜索框输入关键词后更新URL但不增加历史条目：

function updateSearch(query) {
  const url = '/search?q=' + encodeURIComponent(query);
  history.replaceState({query: query}, '', url);
}

监听 popstate 事件处理前进后退

当用户点击浏览器的“前进”或“后退”按钮时，会触发 popstate 事件。你需要监听它来恢复对应页面状态。

示例：

window.addEventListener('popstate', function(event) {
  if (event.state) {
    // 根据保存的状态重新渲染页面
    if (event.state.page === 'about') {
      document.getElementById('content').innerHTML = '
关于我们
公司简介...
';
    } else if (event.state.page === 'home') {
      document.getElementById('content').innerHTML = '
首页
欢迎光临
';
    }
  } else {
    // 初始页面或无状态的情况
    loadDefaultPage();
  }
});

实际使用建议

为确保无刷新导航稳定运行，请注意以下几点：

• 每次调用 pushState 或 replaceState 后，应同步更新页面内容
• state 对象可用于存储轻量级状态信息，如页面类型、参数等
• 服务端需配置支持 History 模式，确保用户直接访问 /about 等路径时能正确返回 index.html
• 始终阻止默认的链接跳转行为（preventDefault），改用 JS 控制导航逻辑

基本上就这些。History API 配合动态内容加载，就能实现平滑的无刷新导航体验。