關於vue的頁面跳轉后，如何每次進入頁面時都能獲取后台數據

watch+mouted

首先說問題。

一.頁面的數據來自后台，即會發起請求從后台取值。

二.子組件的數據刷新的問題，即每次進入父組件的時候，其相關子組件的數據需要重新從后台取值。

1.答：

關於第一個問題。一般來講我們會在vue的created的生命周期中實現，向后台發起請求獲取數據。

但是這樣會帶來一個問題。

1.1.我需要每次進入頁面的時候都從后台獲取數據！

而created事件很明顯是不能實現的。

        稍微解釋下

        首先理解單頁面應用，個人理解，最后的vue項目打完包后只有一個index.html。說明單頁面應用就是字面上的意思，只有一個頁面的應用！

        那么頁面跳轉是什么？借助路由模擬頁面跳轉。

情景描述：單頁面應用中假設現有A、B兩個頁面，用戶進入頁面首先進入A頁面，此時A創建，觸發一系列生命周期包括created。再由A經路由跳到B，此時B創建，觸發一系列生命周期包括created。用戶操作到這一步都沒有任何問題。

       問題開始，用戶從B頁面經過路由跳回A，此時A不會觸發created！因為已經觸發過了！所以A不會向后台發起請求獲取數據。同樣，當再次從A跳到B時，B也不會經過created。

       一般來講，這種情況屬於正常的，但是，如果A、B的數據來源必須經過后台請求，即從A跳往B的時候，實際上提交了與B相關的數據到了后台，然后后台處理后與B頁面之前的數據不同！此時如果B頁面沒有從后台請求數據，必然是錯誤的！

解決方案：我個人的解決方案。

        監聽路由，在需要每次進入都要從后台獲取新數據的頁面例如B頁面，監聽路由的變化

        

       init方法即為每次進入此頁面都需要執行的方法，請求數據的方法也在里面。

 

2.答：

關於第二個問題。一般來講子組件的數據來源有兩種。

2.1由父組件傳入子組件：

     這種情況使用第一個問題的解決方案后，在init方法中加載出子組件需要的數據再傳入子組件即可解決。

2.2由子組件自己向后台發起請求獲取最新數據：

      這種情況，有點類似第一個問題，子組件需要有一個init方法，而不是將獲取數據的方法直接寫在created中，應該在created中調用init。父組件的init方法中，調用子組件的init方法。

父組件：

      

子組件：

      

 

 

以上為個人解決方案，

如果各位看到的朋友有更好的想法，望請指點。有其他的方案也希望能討論討論。