问题描述
在Vue 3中,我创建了以下Home
组件,两个其他组件(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 },//...
]
})
,
对于 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代码后,它被修复了。