迁移至Vue3时router-view无法渲染组件的问题求助

我正在将Vue2项目迁移到Vue3，路径配置正确，但router-view无法渲染组件。排查后发现问题可能出在原Vue2中使用的Vue.extend写法上。

原Vue2组件代码 #

import Vue from 'vue'

import AppHelper from 'eb-common/src-base/app.helper'
import { i18n } from '../i18n/login.i18n'
import App from './LoginApp.vue'
import store from './store'
import CONFIG from '../config'

const metainfo = require('../metainfo.json')

const v = Vue.extend({
    i18n,
    store,
    beforeMount() {
        this.setupVue(CONFIG, metainfo, i18n)
    },
    methods: AppHelper.methods,
    beforeUnmount: AppHelper.beforeUnmount,
    components: {
        App
    },
    template: '<App/>'
})

export default v

路由配置代码 #

import Login from './components/Login/theLogin.routes'

const routes = [
    {
        path: '/eb-app-login',
        name: 'eb-app-login',
        component: () => import(/* webpackChunkName: "login-app" */ './login.app'),
        redirect: { path: '/eb-app-login/login/' },
        children: [].concat(Login)
    }
]

export default routes

已尝试的Vue3写法（无效） #

import { defineComponent } from 'vue'

import AppHelper from 'eb-common/src-base/app.helper'
import { i18n } from '../i18n/login.i18n'
import App from './LoginApp.vue'
import store from './store'
import CONFIG from '../config'

const metainfo = require('../metainfo.json')

const v = defineComponent({
  i18n,
  store,
  methods: AppHelper.methods,
  beforeUnmount: AppHelper.beforeUnmount,
  components: {
    App
  },
  template: '<App/>'
})

export default v

解决建议 #

1. 调整组件定义方式，适配Vue3逻辑 #

Vue3中无需用defineComponent包裹简单配置（除非需要TS类型支持），且生命周期钩子和属性注入逻辑有变化，建议改为组合式API写法：

import AppHelper from 'eb-common/src-base/app.helper'
import { i18n } from '../i18n/login.i18n'
import App from './LoginApp.vue'
import store from './store'
import CONFIG from '../config'

const metainfo = require('../metainfo.json')

export default {
  components: {
    App
  },
  setup() {
    // 替代原beforeMount逻辑，setup在组件挂载前执行
    const { setupVue } = AppHelper.methods
    setupVue(CONFIG, metainfo, i18n)

    // 模板中需用到的AppHelper方法，要返回出去
    return {
      ...AppHelper.methods
    }
  },
  beforeUnmount: AppHelper.beforeUnmount,
  template: '<App/>'
}

2. 确认Vue3路由的正确初始化 #

Vue3路由使用createRouter创建实例，而非Vue2的new VueRouter，确保main.ts中的路由注册逻辑正确：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import routes from './path/to/your/routes'
import App from './App.vue'

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

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

3. 检查子路由配置格式 #

确保Login路由数组中的子路由path为相对路径（不要以/开头），示例：

// theLogin.routes中的配置
export default [
  {
    path: 'login/', // 而非'/login/'
    name: 'login',
    component: () => import('./Login.vue')
  }
]

4. 适配i18n和Vuex的Vue3版本 #

如果使用vue-i18n v9+或Vuex4，需改用组合式API获取实例：

• vue-i18n：在setup中调用useI18n()获取t函数
• Vuex4：在setup中调用useStore()获取store实例
  避免直接在组件配置中注入i18n或store对象。

内容的提问来源于stack exchange，提问作者Wai Chun Meng