如何实现无.html后缀的页面导航（纯HTML/JS方案）

方法一：History API + 页面内容替换（纯前端无后端） #

这种方案完全靠前端JS实现，不需要修改服务器配置，适合页面内跳转的场景：

• 绑定按钮点击事件：
  给按钮添加点击事件，先阻止默认跳转，再用history.pushState修改URL，同时异步加载page1.html的内容替换当前页面主体：

<button id="goToPage1">跳转到Page1</button>

<script>
document.getElementById('goToPage1').addEventListener('click', async (e) => {
  e.preventDefault();
  
  // 修改地址栏URL为/page1，不会触发页面刷新
  history.pushState({ page: 'page1' }, 'Page1', '/page1');
  
  // 加载page1.html的内容
  const res = await fetch('page1.html');
  const content = await res.text();
  
  // 替换页面主体内容（假设页面有id为main的容器）
  document.getElementById('main').innerHTML = content;
  
  // 更新页面标题
  document.title = 'Page1';
});
</script>

• 处理浏览器前进后退：
  监听popstate事件，用户点击前进/后退时，自动加载对应页面的内容：

window.addEventListener('popstate', async (event) => {
  if (event.state?.page === 'page1') {
    const res = await fetch('page1.html');
    const content = await res.text();
    document.getElementById('main').innerHTML = content;
    document.title = 'Page1';
  } else {
    // 回到首页的逻辑
    const res = await fetch('index.html');
    const content = await res.text();
    document.getElementById('main').innerHTML = content;
    document.title = 'Home';
  }
});

方法二：<base>标签 + History API（简化路径写法） #

先设置<base>标签统一路径基准，再配合History API让链接写法更简洁：

• 设置基准路径：
  在index.html的<head>里添加：

<base href="/">

• 按钮点击逻辑：
  按钮的href可以直接写/page1，点击时阻止默认跳转，按规则加载对应HTML文件：

<button id="goToPage1" href="/page1">跳转到Page1</button>

<script>
document.getElementById('goToPage1').addEventListener('click', async (e) => {
  e.preventDefault();
  const targetPath = e.target.getAttribute('href');
  
  history.pushState({ page: targetPath.slice(1) }, targetPath.slice(1), targetPath);
  
  // 加载对应html文件（路径后补.html）
  const res = await fetch(`${targetPath}.html`);
  const content = await res.text();
  document.getElementById('main').innerHTML = content;
  document.title = targetPath.slice(1);
});
</script>

注意事项 #

• 纯前端方案有个局限：如果用户直接在地址栏输入/page1，服务器会返回404，因为不存在page1这个资源。要是想解决这个问题，得配置服务器重写规则（比如把所有非文件路径指向index.html），但这已经超出纯HTML/JS的范围了。
• 替换页面内容时，建议把公共的JS、CSS放在index.html里，目标页面只写主体内容，避免重复加载或冲突。

内容的提问来源于stack exchange，提问作者The Myth