无效的路由组件答案

【问题标题】：Invalid route component无效的路由组件
【发布时间】：2023-03-04 10:42:02
【问题描述】：

想用Vue练习导航栏的时候，遇到了关于无效路由组件的错误。在这个 div 中不能显示任何东西。至于控制台的提示，我没办法了。

App.vue，这里我只展示 Home 导航

<template>
  <div id="app">

    <tab-bar>
      <tab-bar-item class="tab-bar-item" path='/home' activeColor="red">
        <img slot="item-icon" src="./assets/img/tabbar/home.svg" alt="">
        <img slot="item-icon-active" src="./assets/img/tabbar/Home1.svg" alt="">
        <div slot="item-text">Home</div>
    </tab-bar>
    <router-view></router-view>
  </div>

</template>

<script>
  import TabBar from './components/tabbar/TabBar'
  import TabBarItem from './components/tabbar/TabBarItem'

  export default {
    name: 'App',
    components: {
      TabBar,
      TabBarItem
    }
  }
</script>

两个vue组件：

TabBarItem.vue

<template>
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive"><slot name="item-icon"></slot></div>
    <div v-else><slot name="item-icon-active"></slot></div>
    <div :style="activeStyle" :class="{active: isActive}"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
  export default {
  name: 'TabBarItem',
  props: {
    path: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  data() {
    return {
      isActive: true
    }
  },
  methods: {
    itemCilck() {
      this.$router.replace();
      console.log('itemclick')
    }
  }
}
</script>

TarBar.vue

<template>  
    <div id="tab-bar">
      <slot></slot>
    </div>
</template>

<script>

export default {
  name: 'TabBar'

}
</script>

index.js

import { createRouter, createWebHistory } from 'vue-router'
const Home = () => import('../views/home/Home')
const Categroy = () => import('../views/category/Category')
const Cart = () => import('../views/cart/Cart')
const Profile = () => import('../views/profile/Profile')
// import Home from '../views/Home.vue'

const routes = [
  {
    path: '/home',
    component: Home
  },

]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

错误

vue-router.esm-bundler.js:3266 错误：无效的路由组件在 extractComponentsGuards (vue-router.esm-bundler.js:1994) 在 eval (vue-router.esm-bundler.js:3107)

控制台图片

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

根据docs 他们不会在动态导入中省略文件类型，请尝试Home.vue 而不仅仅是Home：

const Home = () => import('../views/home/Home.vue')

【讨论】：

确实，根据文档，它应该是 Home.vue。但即使没有 .vue 似乎也没有问题。我发现它是插槽被放弃。现在，应该使用 v-slot 而不是 slot。但是，我遇到了一个新问题 [vue/valid-v-slot] 'v-slot' 指令必须由自定义元素拥有，但 'div' 不是。
这似乎是另一个问题 :) 我做了一些谷歌搜索，也许这会有所帮助stackoverflow.com/questions/61344980/…

【解决方案2】：

只有一点，你没注意到你的错字吗？

itemCilck() {

【讨论】：