Vue.js - 组件缺少模板或渲染功能答案

【问题标题】：Vue.js - Component is missing template or render functionVue.js - 组件缺少模板或渲染功能
【发布时间】：2021-02-01 03:45:09
【问题描述】：

在 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 中查看问题。

【问题讨论】：

标签： javascript vue.js vue-router vuejs3 vue-router4

【解决方案1】：

当app.component(...) 提供定义对象（第二个参数）时，它返回应用程序实例（以允许链接调用）。要获取组件定义，请省略定义对象并仅提供名称：

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

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

demo

【讨论】：

【解决方案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")

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

确保您已将<router-view></router-view> 添加到您的#app 容器中。

【讨论】：