使用vue-router时页面无法切换、组件不显示问题求助

你遇到的问题主要有三个关键点，逐一修复就能解决：

1. 路由配置里的组件变量大小写错误 #

在router/index.js中，你导入的组件变量是siteview，但路由配置里误写成了siteView（JavaScript是大小写敏感的），这会导致组件无法被正确识别：

// 原导入代码
import siteview from "../components/site.vue";

// 路由配置里的错误写法，需修正为siteview
{
  path: '/site',
  name: 'site',
  component: siteView
},

2. 缺少路由组件挂载容器<router-view> #

你的App.vue模板里没有添加<router-view>标签——这是Vue Router专门用来渲染匹配到的路由组件的容器，没有它，组件根本没有展示的位置。在导航栏代码下方新增该标签：

<template>
  <!-- 原导航栏代码 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- ... 原导航栏内容 ... -->
  </nav>
  <!-- 新增路由组件挂载点 -->
  <router-view></router-view>
</template>

3. 导航链接使用了错误的标签 #

普通<a>标签加to属性无法触发Vue Router的路由跳转，必须使用<router-link>组件来实现单页应用的无刷新导航，替换所有导航链接：

<!-- 替换品牌导航链接 -->
<router-link class="navbar-brand" to="/home">Navbar</router-link>

<!-- 替换导航项里的链接 -->
<li class="nav-item">
  <router-link class="nav-link active" to="/home">Home</router-link>
</li>
<li class="nav-item">
  <router-link class="nav-link" to="/site">Site 1</router-link>
</li>

最后确认main.js中已正确注册路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

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