Vue-router问题：router-view标签无内容显示求助

逐个排查关键问题，快速定位解决：

1. 路由匹配问题（核心原因） #

你的路由配置仅包含/home路径规则，但如果访问根路径/，没有对应路由匹配，router-view自然无内容显示。

两种解决方式二选一：

• 给根路径添加重定向，指向/home：
  修改router.js的routes数组：

  routes: [
    { path: '/', redirect: '/home' }, // 新增该行
    { path: '/home', component: HomePage },
  ]
  

• 直接将HomePage设为根路径组件：

  routes: [
    { path: '/', component: HomePage },
  ]
  

修改后访问根路径或/home均可显示HomePage内容。

2. 确认访问路径正确性 #

确保浏览器地址栏输入的是http://localhost:xxxx/home（替换为你的项目端口），而非仅根路径。

3. 检查HomePage组件导出 #

确认HomePage.vue正确导出组件，示例：

<template>
  <div>首页内容展示</div>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

使用<script setup>语法时，也需保证结构完整。

4. Bootstrap引入优化（非核心，避免后续bug） #

你的main.js导入了bootstrap-vue样式，但未注册组件库。若需使用BootstrapVue组件，修改为：

import { createApp } from 'vue'
import App from './App.vue';
import router from './router.js';
import { BootstrapVue } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

const app = createApp(App);
app.use(BootstrapVue); // 注册BootstrapVue组件库
app.use(router);
app.mount('#app');

若仅需原生Bootstrap样式，可移除bootstrap-vue相关导入。

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