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

对于 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 2

当为

app.component(...)

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

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

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

演示

Answer 3

确保您已将

<router-view></router-view>

添加到

#app

容器中。

Answer 4

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

Answer 5

我也遇到这个问题了。这是一个时间问题。我添加了一个 v-if 来在安装页面时创建组件。这为我解决了问题。

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

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

Answer 6

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

Answer 7

我在 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 8

您需要创建单独的类 (App.vue) 来执行 渲染操作。

查看下面的示例：

./views/App.vue

    <template>
  <main>
      <router-view>
      </router-view>
  </main>
</template>

路由器.js

import { createRouter, createWebHistory } from 'vue-router'

import ExampleComponent from './components/ExampleComponent.vue';


const routes = [
    {
        path: '/',
        name: 'home',
        meta: {
          title: "Home",
      },
        component: ExampleComponent
    }
];

export default createRouter({
  history: createWebHistory(),
  routes
})

app.js（或 main.js）

require('./bootstrap');

import { createApp } from 'vue';
import router from './router'
import App from "./views/App.vue";

createApp(App)
.use(router).mount('#app');

就是这样。

Answer 9

对我来说，问题是我为打字稿启用了 verbatimModuleSyntax，并在 eslint.config.json 中为我的“*.vue”文件启用了

eslint . --fix

和

"@typescript-eslint/consistent-type-imports": "error"

。在组合 API SFC 中，导致

// not just a mere interface - vue3 SFC needs the import to resolve
// the component in the template, should not be optimized away
import type SomeDialog from '@foo/SomeDialog.vue'; // type added
const someDialog = ref<SomeDialog | null>(null);

但是 Vue 需要解决实现问题，而不仅仅是工作类型。因此，请谨慎对 vue SFC 文件运行自动修复！