Vue.js - 組件缺少模板或渲染函數

Question

在 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中的問題。

Answer 1

當app.component(...)被提供一個定義對象（第二個參數）時，它返回應用程序實例（為了允許鏈接調用）。 要獲取組件定義，請省略定義對象並僅提供名稱：

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

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

演示

Answer 2

對於 vue-cli vue 3

createApp 中缺少渲染功能。 使用 createApp 函數設置您的應用程序時，您必須包含包含 App 的渲染函數。

在 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")

Answer 3

解決方案對我來說很簡單，我創建了一個空組件，在填寫模板和一個簡單的文本 HTML 代碼后，它被修復了。

Answer 4

我的解決方案是將節點模塊 vue-loader 升級到 16.8.1 版本。

Answer 5

我也有這個問題。 這是一個時間問題。 我添加了一個 v-if 以在安裝頁面時創建組件。 這對我來說是固定的。

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

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

Answer 6

我在 Vue 3 中擴展了一個 Quasar 組件，遇到了這個問題。 我通過在組件選項的最后添加setup: QInput.setup行來解決它。

<script>
import { defineComponent } from 'vue'
import { QInput } from 'quasar'

const { props } = QInput

export default defineComponent({
  props: {
    ...props,
    outlined: {
      type: Boolean,
      default: true
    },
    dense: {
      type: Boolean,
      default: true
    },
    uppercase: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    modelValue (v) {
      this.uppercase && this.$emit('update:modelValue', v.toUpperCase())
    }
  },
  setup: QInput.setup
})
</script>

Answer 7

確保您已在#app容器中添加了<router-view></router-view> 。