vue-router仅切换URL不切换视图组件的问题求助

问题根源 #

项目未在根组件中设置路由视图挂载点（<router-view>），而是固定渲染了Home组件。这导致路由切换时没有容器加载匹配的视图组件，因此始终显示Home的内容。

解决方案 #

1. 修改根组件（App.vue）

将直接渲染的Home组件替换为<router-view>，让Vue Router有位置展示匹配的路由组件：

<template>
  <router-view />
</template>

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

2. 确保路由正确安装（main.js）

确认在入口文件中正确注册路由：

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

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

3. 优化全局组件布局（可选）

如果希望Header和Footer在所有页面显示，将它们移到App.vue中，而非Home组件内：

<!-- 修改后的App.vue -->
<template>
  <div class="wrapper">
    <Header />
    <router-view />
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {
    Header,
    Footer
  }
}
</script>

同时简化Home组件，仅保留页面专属内容：

<!-- 修改后的Home.vue -->
<template>
  <Main />
</template>

<script>
import Main from '../components/Main.vue'

export default {
  name: 'Home',
  components: {
    Main
  }
}
</script>

调整完成后，点击导航链接即可正确切换视图：访问根路径显示Main组件，访问/shops显示NotMain组件。

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