Invalid route component

Question

When I want to practice a navigation bar with Vue, encountering a mistake about the invalid route component. In this div cannot display anything. As to the hint of the console, I can find no way out.

the App.vue, hereI only show the Home navigation

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

the two vue components：

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

the error

vue-router.esm-bundler.js:3266 Error: Invalid route component at extractComponentsGuards (vue-router.esm-bundler.js:1994) at eval (vue-router.esm-bundler.js:3107)

the console picture

score 1 · Answer 1 · answered Jul 29 '21 at 12:38

1

According to docs they do not omit file types in dynamic imports, try Home.vue instead of just Home:

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

answered Jul 29 '21 at 12:38

Eduardo

1,086
5
19

indeed, according to docs, it should be Home.vue. but it seems no problem even though without .vue. I find that it is slot be abandoned. Now, should use v-slot instead of slot. However, I encounter a new problem [vue/valid-v-slot] 'v-slot' directive must be owned by a custom element, but 'div' is not. – arutoria Jul 30 '21 at 00:37
It seems like another question :) I did some googling, maybe that would help https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier – Eduardo Jul 30 '21 at 06:26
I was following the vueschool tutorial, but I made a mistake, used `component: 'Home'` instead of `component: Home`. After that fix, the error was gone. – ssi-anik Sep 19 '22 at 08:00

Invalid route component

1 Answers1