Vue.js - 组件缺失模板或渲染功能

在Vue 3中，我创建了以下Home组件，其他2个组件（Foo和Bar），并将其传递给vue-router，如下图所示。Home组件是使用Vue的component函数创建的，而Foo和Bar组件是使用普通对象创建的。

我所得到的错误。

Component is missing template or render function.

在这里，Home组件导致了这个问题。我们不能把component()的结果传递给vue-router的路由对象吗？

<div id="app">
   <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/foo">Foo</router-link></li>
      <li><router-link to="/bar">Bar</router-link></li>
   </ul>
   <home></home>
   <router-view></router-view>
</div>

<script>
   const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
   const { createApp } = Vue
   const app = createApp({})

   var Home = app.component('home', {
      template: '<div>home</div>',
   })

   const Foo = { template: '<div>foo</div>' }
   const Bar = { template: '<div>bar</div>' }

   const router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/', component: Home },
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar },
      ],
    })

    app.use(router)

    app.mount('#app')
</script>

请看codesandbox中的问题。

对于 vue-cli vue 3

createApp 中缺少渲染函数。 使用 createApp 函数设置您的应用程序时，您必须包含包含应用程序的渲染函数。

在main.js中更新为:

首先将javascript中的第二行改为：-

const { createApp } = Vue

到以下几行。

import { createApp,h } from 'vue'
import App from './App.vue'

第二

从:-改变

const app = createApp({})

到

const app  = createApp({
    render: ()=>h(App)
});


app.mount("#app")

当app.component(...)被提供一个定义对象（第二个参数）时，它返回应用程序实例（为了允许连锁调用）。要获得组件的定义，可以省略定义对象，只提供名称。

app.component('home', { /* definition */ })
const Home = app.component('home')

const router = createRouter({
  routes: [
    { path: '/', component: Home },
    //...
  ]
})

示范

确保你已经在你的#app容器中添加了<router-view></router-view>。

我这边的解决方案很简单，我创建了一个空的组件，在填入模板和一个简单的文本HTML代码后，它就被修复了。

我的解决方案是将节点模块vue-loader升级到16.8.1版本。

我也有这个问题。这是个时间问题。我添加了一个v-if，以便在页面挂载时创建该组件。这为我解决了这个问题。

<review-info
   v-if="initDone"
   :review-info="reviewInfo"
 />

// script
    onMounted(() => {
      initDone = true
    })