从Vue2升级到Vue3后<router-view />无法正常工作求助

DevOps 小满

2026-8-14

Vue3升级后<router-view>无法渲染组件的解决方案

问题诊断

从你的代码和描述来看，问题出在以下两个关键环节：

1. 路由路径未以 `/` 开头

Vue Router 4（Vue3配套版本）中，根级路由的路径必须以斜杠开头，否则会被识别为相对路径。你的路由配置里path: 'main/publish/tasks'缺少开头斜杠，导致路由无法匹配到正确路径，自然无法渲染组件。

2. `configureCompat` 调用顺序错误

configureCompat 是Vue3的全局兼容配置API，必须在createApp之前调用才能生效。你之前先创建应用实例再配置兼容模式，会导致路由等插件无法正确应用Vue2的兼容行为，进而引发渲染错误。

修正后的代码

Router.js

import { createWebHistory, createRouter } from 'vue-router';
import MyComponent from './component/MyComponent.vue';

const routes = [{
  path: '/main/publish/tasks', // 添加开头斜杠，作为根级路由路径
  component: MyComponent
}]

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

index.js

import { createApp, configureCompat } from 'vue';
import router from './Router';
import MainApp from './MainApp.vue';

// 先配置兼容模式，再创建应用实例
configureCompat({
  MODE: 2,
});

const app = createApp(MainApp);
app.use(router);
app.mount('.vue-app');