手动跳转路由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

TabBarItem.vue

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

  props:{
    path:String
},

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

123.png

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