Vue-Router无法渲染组件，执行npm run dev后页面空白求排查

核心问题：Vue版本与Vue-Router写法不兼容 #

你用了Vue 3的<script setup>语法，但router.js还是Vue 2 + vue-router@3的写法，而你安装的vue-router@latest是适配Vue 3的v4版本，二者语法不匹配，导致路由未正确初始化，页面空白。

具体修改步骤 #

1. 重写router.js为Vue 3 + vue-router@4格式 #

替换原router.js代码：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './src/components/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(), // 用HTML5历史模式，也可换createWebHashHistory()用哈希模式
  routes
})

export default router

2. 在入口文件（main.js/main.ts）挂载路由 #

Vue 3需要手动将路由实例挂载到应用，确保入口文件代码如下：

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

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

3. 简化App.vue（可选） #

全局挂载路由后，<router-view>可直接使用，无需单独导入，App.vue可简化为：

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

额外检查点 #

• 确认Home.vue有实际模板内容（不是空组件）
• 核对router.js中Home组件的导入路径是否正确，根据你的文件结构，./src/components/Home.vue是正确的

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