Ant Desgin Vue 多Tab問題解決艱辛之路

             Ant Desgin Vue 這套UI看起來非常不錯，所以就想嘗試學習一下。但是也遇到了很大的問題就是MultiTab導致的一些問題。不多說，直接上圖：

 

           從列表頁面，編輯某條數據時，其ID值不同，所以就會導致此處名稱相同的tab不斷重復出現。 

           為此，需要在components/MultiTab/MultiTab.vue 里面，在 watch 方法增加一里面些控制：

'$route': function (newVal,oldVal) {
      /* 原來代碼控制
      this.activeKey = newVal.fullPath
      if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
        this.fullPathList.push(newVal.fullPath)
        this.pages.push(newVal)
      }
      */

       var isExists = false  // 判斷當前最新請求的頁面是否已存在於緩存fullPathList中
      var targetPath = ''   // 用於記錄已存在的Tab 對應的網址
      var index = 0       // 如果存在，則對於的下標index

        this.activeKey = newVal.fullPath

      for(let i in this.fullPathList){
        if (this.fullPathList[i].indexOf('Home/Introduce') < 0 && this.fullPathList[i].indexOf(newVal.path) >= 0) {
          isExists = true
          targetPath = this.fullPathList[i]
          index = i
          break
        }
      }
      if(isExists){
       this.fullPathList[index] = newVal.fullPath
       this.pages[index] = newVal
      }else if(newVal.fullPath.indexOf('Home/Introduce') < 0){
        this.fullPathList.push(newVal.fullPath)
        this.pages.push(newVal)
      }

            通過如此修改后，則能有效控制解決同標題的Tab重復出現問題，不會再因為編輯時點擊不同數據出現多個Tab。

            但是接下來會出現，第一次編輯所帶出來的各項數值，會在隨后多次編輯中出現，甚至新增的頁面里面也會出現此問題。

 

 

          經各種折騰，發現在編輯頁面中新增一個方法，在此方法中獲取參數ID值，則能有效解決此問題。用watch方法 替代 mounted

 watch: {
    $route(to, from) { 
      this.qid = to.query.Id;
    }
  }

        繼續折騰，不斷測試中發現，編輯頁面數據成功保存后不能跳轉轉到列表頁面，並同時關閉編輯頁面的Tab。

        在components/MultiTab/MultiTab.vue 里面，繼續在 watch 方法增加如下控制：

      if(newVal.fullPath.indexOf('colOldTab=true')>0){
        this.closeThat(oldVal.fullPath)
      }

         在編輯頁面，返回列表頁面的方法里面，增加一個參數：

      this.$router.push({ path: '/Home/Introduce',query: { colOldTab: true } })

          希望能給當下迷惑不解的人，提供自己的一些解決思路，