Vue.js — в компоненте отсутствует шаблон или функция рендеринга

В 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.


javascript vue.js vuejs3 vue-router vue-router4
person Circuit Breaker    schedule 18.10.2020    source источник

Ответы (3)


arrow_upward
10
arrow_downward

Когда app.component(...) предоставляется объект определения (второй аргумент), он возвращает экземпляр приложения (чтобы разрешить цепочку вызовов). Чтобы получить определение компонента, опустите объект определения и укажите только имя:

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

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

демонстрация

person tony19    schedule 18.10.2020

arrow_upward
1
arrow_downward

ДЛЯ 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({})

to:

const app  = createApp({
    render: ()=>h(App)
});


app.mount("#app")
person Nay    schedule 02.05.2021

arrow_upward
0
arrow_downward

Решение было простым с моей стороны, я создал компонент пустой, после заливки шаблона и простого текстового HTML кода, он был исправлен.

person munandi sichali    schedule 19.05.2021