如何将子页面请求转发至父页面，移除WordPress Vue路由URL锚点#

要实现把/hire/#cameras这类hash模式的URL改成/hire/cameras的history模式，你需要同时调整Vue路由配置和WordPress的.htaccess重写规则，只改其中一个肯定会触发404错误，具体步骤如下：

1. 配置Vue路由为History模式 #

首先得让Vue切换到history模式，并设置正确的基础路径（因为你的Vue应用挂载在/hire这个WordPress页面下）。在你的Vue路由配置文件中修改：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入你的组件示例
import Cameras from './components/Cameras.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  // 切换到history模式，彻底移除URL中的#号
  mode: 'history',
  // 设置基础路径，对应WordPress页面的slug
  base: '/hire/',
  routes: [
    // 你的路由规则，比如匹配/cameras路径
    { path: '/cameras', component: Cameras },
    // 其他路由配置...
  ]
})

export default router

这一步会让Vue生成不带#号的URL，同时在前端跳转时正确处理路由逻辑。

2. 修改WordPress的.htaccess规则 #

WordPress默认会把/hire/cameras这类URL当成不存在的页面返回404，所以需要添加一条重写规则，让所有/hire/开头的子路径请求都转发到/hire页面。

找到你的.htaccess文件中的# BEGIN WordPress块，在默认规则前插入自定义规则：

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# 新增规则：将/hire/xxx这类请求转发到/hire页面
# [L]标志表示匹配后停止后续规则处理，避免触发WordPress的404逻辑
RewriteRule ^hire/([^/]+)/?$ /hire/ [L]

# WordPress默认的重写规则（不要修改这部分）
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

关键注意事项： #

• 确保你的WordPress固定链接不是默认的“朴素”模式（即?p=123这种），需要在后台设置→固定链接中选择“文章名称”或其他自定义结构，保存后WordPress会生成正确的基础重写规则，再添加上面的自定义规则才会生效。
• 检查服务器是否启用了mod_rewrite模块（Apache服务器默认一般是开启的，如果你用的是Nginx需要对应调整配置，但你用的是.htaccess所以应该是Apache环境）。
• 确认/hire是一个存在的WordPress页面，slug为hire（没有拼写错误）。

3. 测试验证 #

完成以上配置后，清除浏览器缓存，访问/hire/cameras：

• 不会再出现404错误，页面会正常加载/hire的内容
• Vue路由会自动识别/cameras路径，渲染对应的组件

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