手动跳转路由this.$router.push(this.path)的坑

直接看代码
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'


const Home = () => import('../views/home/Home.vue')
const Category =() => import('../views/category/Category.vue')
const Shopcar =() => import('../views/shopcar/Shopcar.vue')
const Profile =() => import('../views/profile/Profile.vue')

Vue.use(VueRouter)

const routes = [
    {
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component:Home
    },
    {
        path:'/shopcar',
        component:Shopcar
    },
    {
        path:'/category',
        component:Category
    },
    {
        path:'/profile',
        component:Profile
    },

]

const router = new VueRouter({
    routes,
    mode:'history'
})

export default router

MainTabBar.vue

<template>
  <div id="maintabbar">
   this is maintabbar
   <tab-bar-list>
      <tab-bar-item path="/home" >h</tab-bar-item>
      <tab-bar-item path='/category'>c</tab-bar-item>
      <tab-bar-item path='/shopcar'>s</tab-bar-item>
      <tab-bar-item path='/profile'>p</tab-bar-item>
   </tab-bar-list>
  </div>
</template>

<script>
import TabBarList from '../components/tabbar/TabBarList'
import TabBarItem from '../components/tabbar/TabBarItem'
export default {
  data(){
      return {

      }
  },
  components:{
      TabBarList,
      TabBarItem
      
  }
}
</script>

<style>

</style>

TabBarItem.vue

<template>
  <div id="tabbaritem" @click="itemClick">
      this is tabbar item
  </div>
</template>
<script>
export default {
  props:{
    path:String
},
   methods:{
       itemClick(){
          this.$router.push(this.path)
      }
   }
}
</script>

<style>

</style>

这是封装一个tabbar组件的部分代码，在手动用this.$router.push进行跳转时，一定要注意
1.在需要跳转的组件中一定要在props中定义path

  props:{
    path:String
},

如果只是在前面跳转的根组件中定义组件path，会报错

123.png

所以一定要在跳转的组件中的props中定义path