Vue3单页应用配置404路由组件不渲染问题排查

导致这个现象的是两个叠加的配置错误：

• 路由出口缺失：你直接把写满首页业务组件的App.vue配成了根路径/的路由组件，但Vue项目中App.vue是全局挂载的根容器，默认在所有路径下都会常驻渲染。你在App.vue里直接硬编码了Land、Navbar、Projects等所有首页模块，没有放置<RouterView />路由出口标签，不管路由规则匹配到哪个组件，都没有位置渲染，页面永远会显示App.vue里写死的首页内容。
• 通配路由规则不完整：Vue Router 4.x 中，你写的/:pathMatch(.*)规则只能匹配/后不带斜杠的单级路径（比如/abc），无法匹配多级路径、末尾带斜杠的路径（比如你测试的/abcf/、/a/b/c这类），因为缺少了路径参数的重复匹配修饰符，很多错误路径根本匹配不到404规则。

按以下步骤调整即可：

1. 抽离首页页面组件
   新建独立的首页页面文件，比如src/views/Home.vue，把原来App.vuetemplate里的所有首页内容全部剪切到这个文件里。
   改造App.vue，只保留路由出口作为全局容器：

   <!-- 修改后的App.vue -->
   <template>
     <RouterView />
   </template>
   

2. 修正路由配置
   把根路径对应的组件替换为刚抽离的Home组件，同时补全404通配规则的修饰符，确保能匹配任意层级的错误路径：

   // 修改后的router.js
   import { createRouter, createWebHistory } from 'vue-router';
   
   const router = createRouter({
     history: createWebHistory(),
     routes: [
       {
         path: '/',
         name: 'Home',
         component: () => import('../views/Home.vue'), // 路径和你实际存放位置保持一致
       },
       {
         path: '/:pathMatch(.*)*', // 末尾加*，实现全路径通配
         name: 'ErrorView',
         component: () => import('../components/Error.vue'),
       }
     ],
   });
   
   export default router;
   

3. 核对入口挂载逻辑
   确认项目入口文件（一般是src/main.js）的挂载逻辑符合规范，不要把路由页面直接当根组件挂载：

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router' // 替换为你实际的router文件路径
   
   createApp(App).use(router).mount('#app')
   

调整完成后重启开发服务验证：访问根路径正常渲染首页，访问任意不存在的路径会正确加载404错误页面，不会再残留首页内容。

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