如何通过window.history.pushState跳转至index.php并自定义URL显示为Testie？

核心问题说明 #

window.history.pushState()本身仅负责修改浏览器历史记录和地址栏显示，不会自动加载目标页面，同时因为不存在Testie相关文件，直接访问或刷新会出现404，需要结合前端页面加载逻辑和服务器重写规则来解决。

前端实现代码 #

给按钮绑定点击事件，先加载index.php的内容，再修改地址栏：

<button onclick="navigateToIndex()">跳转到首页</button>

<script>
function navigateToIndex() {
  // 异步加载index.php的页面内容
  fetch('index.php')
    .then(res => res.text())
    .then(pageContent => {
      // 替换当前页面的内容（可根据需求仅替换指定容器，比如document.getElementById('content').innerHTML = pageContent）
      document.body.innerHTML = pageContent;
      // 修改地址栏显示为Testie，同时添加历史记录
      window.history.pushState({page: 'index'}, '页面标题', 'Testie');
    });
}

// 处理浏览器前进/后退操作，避免页面状态异常
window.addEventListener('popstate', (e) => {
  if (e.state?.page === 'index') {
    fetch('index.php')
      .then(res => res.text())
      .then(pageContent => {
        document.body.innerHTML = pageContent;
      });
  }
});
</script>

服务器端配置（关键，解决404问题） #

因为不存在Testie文件，需要让服务器将Testie的请求转发到index.php，以下是主流服务器的配置方式：

Apache服务器（创建.htaccess文件放在网站根目录）

RewriteEngine On
# 仅当请求的文件/目录不存在时生效
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 将Testie的请求转发到index.php
RewriteRule ^Testie$ index.php [L]

Nginx服务器（在站点配置中添加）

location /Testie {
  try_files $uri $uri/ /index.php?$args;
}

原理说明 #

1. 前端通过fetch加载index.php的内容并替换当前页面，实现页面跳转的视觉效果；
2. pushState修改地址栏显示为Testie，同时在浏览器历史中添加一条记录；
3. 服务器重写规则确保用户直接访问xxx.com/Testie或刷新页面时，服务器能正确返回index.php的内容，避免404错误。

内容的提问来源于stack exchange，提问作者Thijs Rietveld