Vue Router路由异常：访问/samuifight未显示对应组件内容

问题现象 #

访问 http://localhost:8080/samuifight 时，URL自动跳转至 http://localhost:8080/SamuiFight，预期显示 SamuiFight.vue 中的「Hi SamuiFight」，但实际仅显示 App.vue 里的「Hello app.vue」。

核心原因及解决方法 #

1. 缺少路由出口组件（最关键） #

你的 App.vue 中没有添加 <router-view> 标签——这是Vue Router渲染匹配路由组件的唯一出口。没有它，无论路由如何切换，页面只会显示 App.vue 的内容，永远不会加载目标组件。

修改 App.vue：

<template>
  <h3>Hello app.vue</h3>
  <!-- 添加路由出口，匹配的路由组件会在这里渲染 -->
  <router-view></router-view>
</template>

2. URL大小写不匹配导致路由未命中 #

路由配置的路径是 /samuifight（全小写），但浏览器URL自动变成了 /SamuiFight（首字母大写），导致路由无法匹配。可以通过两种方式解决：

方式一：统一路由路径与实际URL的大小写

修改路由配置中的路径为大写开头：

const router = createRouter({
    history: createWebHistory(),
    routes: [
       { path: '/SamuiFight', component: SamuiFight } // 改为和URL一致的大小写
    ]   
});

方式二：设置路由不区分大小写

在路由配置中添加 caseSensitive: false（默认值即为false，显式设置更稳妥），让路由匹配时忽略大小写：

const router = createRouter({
    history: createWebHistory(),
    caseSensitive: false, // 关闭大小写敏感匹配
    routes: [
       { path: '/samuifight', component: SamuiFight }
    ]   
});

验证修改 #

完成上述修改后重启项目：

• 访问 http://localhost:8080/samuifight 或 http://localhost:8080/SamuiFight 都会匹配到 SamuiFight.vue，页面会同时显示 App.vue 的内容和 SamuiFight.vue 的「Hi SamuiFight」。如果不需要显示 App.vue 里的标题，可直接删除 <h3>Hello app.vue</h3>。

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