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

问题描述

在Vue 3中,我创建了以下Home组件,两个其他组件(FooBar),并将其传递给vue-router,如下所示。 Home组件是使用Vue的component函数创建的,而FooBar组件是使用普通对象创建的。

我得到的错误:

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

解决方法

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

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

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

demo

,

对于 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")
,

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

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...