В Vue 3 я создал следующий компонент Home
, 2 других компонента (Foo
и Bar
) и передал их vue-router
, как показано ниже. Компонент Home
создается с использованием функции component
Vue, тогда как компоненты 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.