如何在基于AJAX的PHP单页网站中实现友好URL？

1. 前端逻辑调整（无刷新修改URL） #

通过HTML5提供的History API实现点击导航时修改地址栏URL，同时不触发页面刷新，同时优化原有交互逻辑：
首先将导航栏调整为普通a标签结构，示例：

<a href="/myApp/home" class="nav-link">首页</a>
<a href="/myApp/about" class="nav-link">关于</a>
<a href="/myApp/contact" class="nav-link">联系我们</a>

替换原有JS逻辑：

const loadContent = (pageName, addHistory = true) => {
    $.ajax({
        url: `${pageName}.php`,
        success: function(data) {
            $('#content-container').html(data);
            // 加载完成后修改地址栏URL
            if(addHistory) {
                window.history.pushState({page: pageName}, '', `/myApp/${pageName}`);
            }
        }
    })
}

// 绑定导航点击事件
$('.nav-link').click(function(e) {
    e.preventDefault(); // 阻止a标签默认跳转刷新
    const targetPage = $(this).attr('href').split('/').pop();
    loadContent(targetPage);
})

// 监听浏览器前进后退按钮，自动加载对应内容
window.addEventListener('popstate', function(e) {
    if(e.state?.page) {
        loadContent(e.state.page, false);
    } else {
        loadContent('home', false);
    }
})

// 页面首次加载时，根据当前URL自动加载对应内容
$(document).ready(function() {
    const currentPage = window.location.pathname.split('/').pop();
    if(currentPage && currentPage !== '' && currentPage !== 'index.php') {
        loadContent(currentPage, false);
    } else {
        loadContent('home', false);
    }
})

2. 服务端重写规则配置 #

这一步是为了保证用户手动输入URL（比如localhost/myApp/contact）时，请求会被转发到index.php处理，而不是报404或直接打开独立的PHP文件：

• 如果你使用Apache服务器，在项目根目录新建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L]

• 如果你使用Nginx服务器，修改站点配置文件，添加以下规则：

location /myApp/ {
    try_files $uri $uri/ /myApp/index.php?$query_string;
}

3. 禁止直接访问子页面文件 #

为了避免用户直接输入.php后缀地址访问到独立页面，在Home.php、About.php、Contact.php所有子页面的最顶部添加判断逻辑：

<?php
// 仅允许通过index.php引入访问
if(!defined('ACCESS_FROM_INDEX')) {
    header('Location: /myApp/');
    exit;
}
?>

同时在index.php的最顶部添加一行定义：

<?php define('ACCESS_FROM_INDEX', true); ?>

上述方案实现的URL默认不带.php后缀，如果你确实需要保留.php后缀，调整JS路径拼接逻辑和服务端重写规则即可。

内容的提问来源于stack exchange，提问作者Osman Aziz