Vue3搭配vue-router@4路由对应组件不渲染、页面无内容如何解决？

• 错误1：App.vue缺失<router-view>路由出口
  vue-router匹配到的路由组件必须渲染在<router-view>标签内，你当前App.vue只有script和style部分，没有template结构，也没有放置路由出口，因此没有任何组件内容会被渲染。
  修复方式：给App.vue添加template结构，插入<router-view>：

<template>
  <div class="container">
    <!-- 路由匹配的组件将渲染在此处 -->
    <router-view></router-view>
  </div>
</template>
<!-- 原有script、style代码保持不变 -->

• 错误2：main.js路由注册写法错误
  Vue Router 4仅需要注册通过createRouter生成的router实例即可，不需要额外导入并注册VueRouter，这是Vue2的旧写法，多余注册会导致路由实例异常。
  修复方式：修改main.js代码，删除多余的VueRouter导入和注册逻辑：

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

// 删除import VueRouter from 'vue-router'和.use(VueRouter)逻辑
createApp(App).use(router).mount('#app')

• 错误3：路由配置的组件导入路径错误
  你说明组件存放在./components/users路径下，但当前路由配置里的导入路径import AppView from "../AppView"指向的是src根目录下的AppView文件，和实际存放路径不符，且未补全.vue后缀，会导致组件加载失败。
  修复方式：修改路由配置的导入路径，匹配实际组件存放路径，补全.vue后缀（示例根据你的实际文件结构调整即可）：

// 路由文件路径为src/router/router.js时，对应components/users下的组件导入写法
import AppView from "../components/users/AppView.vue";
import AppRegister from "../components/users/AppRegister.vue";

• 错误4：路由跳转时机错误
  你在beforeCreate钩子中调用this.$router.push，此时组件实例还未初始化完成，路由实例也未完全挂载，可能导致跳转失效，甚至出现无法读取$router的报错。
  修复方式二选一：

1. 把跳转逻辑移到mounted钩子中执行
2. 直接在路由配置中添加根路径重定向，稳定性更高：

const routes = [
    // 新增根路径重定向规则
    {
        path: '/',
        redirect: '/view'
    },
    {
        path: '/view',
        name: 'view',
        component: AppView
    },
    {
        path: '/register',
        name: 'register',
        component: AppRegister
    }
]

添加重定向规则后，删掉App.vue的beforeCreate里的this.$router.push逻辑即可。

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