【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. r o u t e r 切 換 導 航 失 敗 ， 出 現 相 關 博 客 ， t h i s . router切換導航失敗，出現相關部落格，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')
  }