我帮你梳理几个最可能的原因，你可以按顺序逐一排查：

1. 导航逻辑没切换到路由跳转 #

你之前用v-show依赖navSelect状态切换组件，现在改用路由后，你的navigate方法大概率还在更新navSelect，没有触发路由跳转。

检查Content.vue里的navigate方法：

// ❌ 旧逻辑（只更新状态，和路由无关）
navigate(event) {
  this.navSelect = event
}

// ✅ 正确的路由跳转逻辑
navigate(event) {
  // 用路由name跳转（和你routes.js里的name完全匹配）
  this.$router.push({ name: event })
  // 或者用路径跳转：this.$router.push(`/${event}`)
}

如果还是维持旧的状态更新逻辑，路由根本没变化，router-view自然不会渲染新组件。

2. 组件导入路径可能有误 #

你的routes.js里导入组件时没加.vue后缀：

import Introduction from './components/introduction/introduction'

如果你的Webpack配置没有自动识别.vue扩展名，会导致组件无法正确导入。建议统一加上后缀，避免路径解析错误：

import Introduction from './components/introduction/introduction.vue'
import Skills from './components/skills/skills.vue'
// 其他组件同理补上.vue后缀

3. 路由路径的大小写匹配问题 #

你的路由配置里路径是大写开头（比如/Introduction），而Vue Router默认是区分大小写的。如果导航时传递的参数是小写（比如introduction），会导致找不到对应路由。

解决方法二选一：

• 确保navigate方法传递的event参数和路由name完全一致（你的路由name都是Introduction、Skills这种大写开头）
• 在路由实例里关闭大小写敏感：

const router = new VueRouter({
  routes: Routes,
  caseSensitive: false // 关闭大小写匹配
})

4. 检查目标组件本身是否能正常渲染 #

可以直接访问对应路由路径（比如http://localhost:8080/Skills），看看router-view是否渲染组件。如果还是不显示，可能是Skills组件本身有问题（比如模板为空、生命周期钩子静默报错）。

5. 确认路由实例是否正确注入 #

虽然你的main.js看起来配置正确，但可以在Content.vue的钩子函数里打印路由实例，确认是否能正常访问：

created() {
  console.log('路由实例:', this.$router)
  console.log('当前路由:', this.$route)
}

如果打印结果是undefined，说明路由没有正确注入，需要再检查main.js里的路由挂载逻辑。

优先排查第1和第2点，这两个是这类问题最常见的诱因。如果还是不行，再逐步检查后面的点。

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