Vue同一個頁面不關閉，再次進入頁面資料不重新整理問題

目錄

• Vue同一個頁面不關閉，再次進入頁面資料不重新整理問題
• • 一、問題描述
  • 二、問題分析
  • 三、問題解決
  • • 3.1 方法一：watch監聽$route的變化
    • 3.2 方法二：activated和deactivated
  • 四、漂亮的Ending

一、問題描述

• 從A清單頁面跳轉到B詳情頁面，第一次跳轉，B詳情頁面的資料顯示正常
• 從A清單頁面選擇了另一條資料，第二次跳轉到B頁面，B頁面的資料不變，不更新
• 關閉B詳情頁面，再從A清單頁面打開B，則資料顯示正常

二、問題分析

• 資料重新整理函數this.updateData()放到了created裡面
• created隻在頁面建立的時候，執行一次，是以無法做到資料及時更新

三、問題解決

3.1 方法一：watch監聽$route的變化

監聽頁面路由的變化，發現頁面重新進來後，就及時更新資料

watch: { 
      '$route' (to, from) { 
        // console.log("watch", to, from)
        if(to.path=="/samplingAuto/auto"){
          console.log("重新整理")
          this.updateData()
        }
      }
    },
           

3.2 方法二：activated和deactivated

activated: function () {
      console.log("重新整理")
      this.updateData()
    },
           

四、漂亮的Ending

覺得好，就打個賞呗

覺得好，就一鍵三連呗