Vue Router搭配PHP应用多层路由时.htaccess重定向异常求助

问题原因 #

当页面处于/foo/bar这类多层路由时，浏览器会把相对路径的AJAX请求（比如php/action/ajaxFile.php）解析为相对于当前路由的路径，也就是/foo/php/action/ajaxFile.php，而非根目录下的正确路径。

解决方案 #

• 修改AJAX请求为绝对路径
  把所有AJAX请求的URL开头加上斜杠，从相对路径改为绝对路径：

  // 原写法（相对路径）
  axios.get('php/action/ajaxFile.php')
  // 修改后（绝对路径）
  axios.get('/php/action/ajaxFile.php')
  

  这样无论当前路由层级如何，请求都会从网站根目录开始查找文件。

• 添加页面基准URL
  在HTML的<head>标签中添加<base>标签，指定所有相对路径的基准为网站根目录：

  <head>
    <base href="/">
    <!-- 其他head内容 -->
  </head>
  

  这个方法不需要修改每个AJAX请求，所有相对路径都会自动基于根目录解析。

• 确认Vue Router配置
  确保Vue Router的历史模式配置中，base参数设置为根路径（默认值就是'/'，如果之前修改过需要调整）：

  import { createRouter, createWebHistory } from 'vue-router'
  
  const router = createRouter({
    history: createWebHistory('/'), // 明确指定base为根目录
    routes: [
      // 路由配置
    ]
  })
  

补充说明 #

你当前的.htaccess规则是正确的，它只会将不存在的文件/目录请求转发到index.php，而AJAX请求的/php/action/ajaxFile.php是实际存在的文件，不会被该规则重写，问题核心在于前端路径的解析逻辑。

内容的提问来源于stack exchange，提问作者Bertrand PETIT