如何在 vue 路由中使用组件？

Posted 2023-02-23

【中文标题】如何在 vue 路由中使用组件？

【英文标题】：How do I use a component in a vue route?

【发布时间】：2020-02-13 17:41:50

【问题描述】：

我正在尝试在我的主路由中使用 vue 组件 <channel-card></channel-card>，但遇到了许多错误。

ma​​in.js

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

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

编辑

我也尝试将它添加到我的 home.vue 路由中：

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

我收到此错误：

./partials/ChannelCard.vue in ./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&

【参考方案1】：

需要注册<channel-card>组件，并在home.vue的脚本部分添加到components：

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>

【讨论】：

我试过了，得到了这个错误：>找不到这个相关模块：* ./components/views/partials/ChannelCard in ./node_modules/cache-loader/dist/cjs.js? ?ref--12-0!./n ode_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/ lib??vue-loader-options!./src/components/home.vue?vue&type=script&lang=js&

非常抱歉，我只是编辑了你的帖子，而不是我的。

@user3325126 ./components/views/partials文件夹中有组件ChannelCard.vue吗？