Как использовать компонент в маршрутном маршруте?

Question

Я пытаюсь использовать компонент vue <channel-card></channel-card> в моем домашнем маршруте, и я сталкиваюсь с множеством ошибок.

main.js

const router = new VueRouter({
  routes: [
    {path: '/home', component: home}
  ],
  mode: 'history'
});

home.vue route

<template>
  <div class="home">
    <main class=" bg-white w-full h-100vh shadow-md p-2">
      <channel-card></channel-card>
    </main>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Ошибка

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <channel-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Home> at src/components/home.vue
       <App> at src/App.vue
        <Root>

ChannelCard.vue

export default {
  name: 'ChannelCard',
  props: {
    msg: String
  }
}

Редактировать

Я также пытался добавить это в свой дом.vue route:

import ChannelCard from './partials/ChannelCard.vue';
export default {
  name: 'home',
  components: { ChannelCard },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

Я получаю эту ошибку:

. / partials / ChannelCard.vue в ./node_modules/cache-loader/dist/cjs.js ?? ref - 12-0! ./ node_modules / b abel-loader / lib! ./ node_modules / cache-loader / dist / cjs.js ?? ref - 0-0! ./ node_modules / vue-loader / lib? ? vu e-loader-options! ./ src / components / home.vue? vue & type = script & lang = js &

Answer 1

Вам необходимо зарегистрировать компонент <channel-card> и добавить его к components в разделе сценариев home.vue:

home.vue

<template>
  <div class="home">
    <main class=" bg-white w-full h-100vh shadow-md p-2">
      <channel-card></channel-card>
    </main>
  </div>
</template>

<script>
import channelCard from './channel-card.vue';

export default {
  name: 'home',
  components: { channelCard },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>