Vue 3 History模式路由跳转至子路径时页面重载问题排查

根据你描述的情况——根路径/跳转正常，但/reviews这类子路径跳转时页面重载，结合你的配置，我梳理了几个最可能的原因和对应的解决方案：

1. 检查createWebHistory的base路径配置 #

如果你的Vue项目不是部署在域名根目录（比如部署在http://yourdomain.com/my-app/这样的子目录），但你在createWebHistory()中没有传入对应的base路径，就会导致路由匹配异常，触发浏览器原生跳转（页面重载）。

修复方法： #

在router.js中，将createWebHistory()改为传入你的项目部署路径：

const router = createRouter({
  // 假设部署在 /my-app/ 路径下
  history: createWebHistory('/my-app/'),
  routes,
})

同时，更新.htaccess中的RewriteBase为相同路径：

RewriteBase /my-app/

2. 确认.htaccess放置位置和Apache模块启用 #

虽然你的.htaccess规则是History模式的标准配置，但需要确保：

• .htaccess文件放在项目的根目录（也就是index.html所在的目录），如果放错位置，重写规则不会生效，可能间接导致跳转异常。
• Apache服务器已经启用了mod_rewrite模块。可以通过查看Apache的配置文件（比如httpd.conf），确保LoadModule rewrite_module modules/mod_rewrite.so这一行没有被注释。

3. 检查router-link的使用是否正确 #

虽然根路径跳转正常，但还是要确认子路径的router-link没有以下问题：

• 不要在router-link上添加target="_blank"，这会强制打开新页面导致重载。
• 确保to属性的路径拼写正确，或者使用命名路由时名称和路由配置中的name一致：

  <!-- 正确写法：使用路径 -->
  <router-link to="/reviews">Reviews</router-link>
  <!-- 正确写法：使用命名路由 -->
  <router-link :to="{ name: 'Reviews' }">Reviews</router-link>
  

• 避免给router-link添加原生点击事件（比如@click.native），这会绕过Vue Router的前端路由拦截，触发页面跳转。

4. 确认路由组件是否正确导入 #

如果Reviews组件没有正确导入（比如路径写错、组件文件不存在），会导致路由匹配失败，Vue Router无法处理该导航，从而触发浏览器原生跳转。

检查router.js中Reviews组件的导入语句，确保路径正确：

import Reviews from '../views/Reviews.vue'; // 根据你的实际路径调整

5. 检查全局事件或第三方插件的干扰 #

有些全局点击事件、或者第三方UI库的事件处理，可能会阻止Vue Router的默认导航行为，或者强制触发页面跳转。可以尝试临时移除全局事件监听或第三方插件，测试是否能正常跳转。

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