在 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 中的问题.
最佳答案
当 app.component(...)
提供了一个定义对象(第二个参数),它返回应用程序实例(为了允许链接调用)。要获取组件定义,请省略定义对象并仅提供名称:
app.component('home', { /* definition */ })
const Home = app.component('home')
const router = createRouter({
routes: [
{ path: '/', component: Home },
//...
]
})
demo
关于javascript - Vue.js - 组件缺少模板或渲染功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64409157/