Vue 3.5.4版本中Vue Router视图切换失效问题求助

核心问题：缺少路由视图容器 #

你的App.vue中没有添加<router-view />组件——这是Vue Router用来渲染当前路由对应页面的核心容器。虽然路由路径能正常更新，但没有指定视图渲染的位置，所以页面组件无法加载切换。

分步修复 #

1. 在App.vue中添加<router-view>
   修改App.vue的模板部分，在导航栏和页脚之间插入路由视图容器：

<template>
  <nav-bar></nav-bar>

  <p>Current route path: {{ $route.path }}</p>
  
  <!-- 新增：路由视图渲染容器 -->
  <router-view />

  <Footer></Footer>
</template>

<script lang="js">
import NavBar from "@/components/NavBar.vue";
import Footer from "@/components/Footer.vue";
export default {
  components: { Footer, NavBar },
  mounted() {
    this.$router.push("/")
  }
}
</script>

<style scoped>
br, body {
  background-color: coral;
}
</style>

2. 替换路由历史模式（可选但推荐）
   你当前使用的createMemoryHistory是为服务端渲染(SSR)或测试场景设计的，浏览器环境下建议改用createWebHistory，避免潜在的路由行为异常：
   修改Main.js中的路由创建代码：

import { createWebHistory, createRouter } from 'vue-router'

// ...

const router = createRouter({
  history: createWebHistory(), // 替换原有的createMemoryHistory
  routes,
})

3. 校验组件导入路径一致性
   Main.js中导入的AboutView对应文件是About.vue，需确保路径和文件名完全匹配（注意部分操作系统区分文件名大小写）：

// 原代码
import AboutView from "@/components/AboutView.vue";
// 修改为匹配你的文件命名
import AboutView from "@/components/About.vue";

验证效果 #

完成修改后重启项目：

• 点击路由链接时，$route.path会正常更新
• <router-view>会自动渲染对应路由的页面组件（Home/About视图）

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