瞭解vue路由器和數據屬性

我遇到了一種情況，當我導航到路由時，我的計算屬性會相應地更新和更新我的視圖。當我切換到另一條路線時，我失去了在此範圍內分配的所有數據。我正在使用created來初始化這些變量，然後再導航它們重新初始化爲空狀態。瞭解vue路由器和數據屬性

在我的計算屬性中，我填充這些其他（創建的變量），並在視圖中使用它們。

我的問題是 - 重新初始化正常嗎？我是否錯誤地處理了這個問題？

created: function() { 
      this.abc = {}; 
    }, 
    computed: { 
     myData: function() { 
      return this.$store.state.myData; 
     }, 
     setupData: function() { 
      console.log('only update now!') 
      var myData = this.myData; 

      //doSomething that updates this.abc 
     } 
    }, 
    watch: { 
     myData: { 
      handler: function(newValue) { 
       this.setupData(newValue); 
      }, 
      deep: true 
     } 
    },

來源

2017-09-18 KingKongFrog

是的，這是預期的行爲。無論何時路由到新組件，都會創建該組件並破壞以前的路由組件。 http://jsfiddle.net/yqtgpapd/ – thanksd

@thanksd所以我很困惑。如果我有一個相應更新的計算屬性。然後從該屬性過濾出某些標準並通過不同的變量顯示在視圖中。如果每次都清除但計算的屬性已填充，我該怎麼做呢？ – KingKongFrog

你沒有足夠的解釋你的問題或者沒有足夠的代碼來知道你期望發生什麼以及你實際遇到了什麼。提供的答案不適合你嗎？請詳細說明 – thanksd

是的，重新初始化是正常的。如果你想保持你的組件，使用keep-alive tag：

如果你想保持切換出去的組件在內存中，這樣你可以保留他們的狀態或避免重新渲染，你可以用一個動態部件在一個元件：

：
<keep-alive> 
    <component :is="currentView"> 
     
    </component> 
</keep-alive> 
有關<router-view>也refers to it的文檔3210

由於它只是一個組件，它與<transition>和<keep-alive>一起使用。

來源

2017-09-18 19:54:56 cello

噹噹！打敗我吧。 – Kano

cello @Kano這工作 - 我看到的一個問題是，當我在路線之間切換時，我開始發現視圖在底部附加到對方。曾見過這個？我試圖看看這段代碼是否與這些不相關的代碼無關，但只是想看看你的思想。 – KingKongFrog

瞭解vue路由器和數據屬性

回答

相關問題