VueJS 3配置路由后页面空白，注释路由代码恢复正常求助

1. 修复Vue Router配置错误 #

Vue Router 4（适配Vue3）已废弃mode配置项，需替换为history属性并传入对应历史模式实例：

修改routes.js：

import * as VueRouter from 'vue-router';
// 补全.vue后缀，避免路径解析异常
import Home from './components/home.vue';

const router = VueRouter.createRouter({
    // 替换原mode: 'history'配置
    history: VueRouter.createWebHistory(),
    routes:[
        {
            path:'/',
            name:'home',
            component: Home
        }
    ]
});

export default router;

2. 添加路由渲染出口 #

启用路由后，根组件必须包含<router-view>标签，用于渲染路由匹配的组件。调整结构如下：

• 新建根组件App.vue（放在项目根目录）：

<template>
  <!-- 路由组件的渲染容器 -->
  <router-view></router-view>
</template>

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

• 修改app.js，导入新的根组件：

import * as Vue from 'vue';
// 替换为导入根App组件
import App from "./App.vue";
import router from './routes';

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

3. 校验文件路径 #

确保routes.js中Home组件的导入路径正确，补全.vue后缀，避免部分构建工具无法识别文件。

完成以上操作后重启项目，路由即可正常工作，页面将显示「Hello world」。

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