【vue】this.$router.replace跳转不起作用 Router push or replace not working

项目场景：

商城APP底部导航切换对应页面

---

问题描述

提示：这里描述项目中遇到的问题：

Just sit there clicking the home btn watching log show me /home but never getting there…

export default {
    name: 'TabBarItem',
    props: {
      path: String
    },
 }
 methods: {
      itemClick () {
        this.$router.push(this.path)
        console.log(this.path);
      }
    },

---

debug过程：

google,
first key search words are this.$router切换导航失败，出现相关博客，this.$router.push路由不跳转
second key search words are this.$router.push not working 搜索框出现相关词nuxt,点击推荐链接搜索，出现一个vue博客，看了2遍，博主说到自己debbug的方法，在搜索框输入路径，准确的，遂效仿之，发现我自己的页面没有跳转出对应页面，检查代码，终于找到漏了import

总结 debug方法
1.排除是否是点击有问题 检查itemClick,在itemClick方法里打log
2.排除是否是path没有传过来，在itemClick方法里打log（this.path）
3.在搜索框里直接输入检查route是否成功（***）

---

解决方案：

component代码添加import

{
    path: '/category',
    component: () => import('../views/category/category.vue')
  }, {
    path: '/cart',
    component: () => import('../views/cart/cart.vue')
  }, {
    path: '/profile',
    component: () => import('../views/profile/profile.vue')
  }