vue傳參頁面刷新數據丟失問題

在作vue的時候，常常會遇到組件之間數據的傳遞問題，經過params或者query傳參，可是，當頁面刷新的時候，數據會丟失，找不到數據。今天通過總結，解決了這個問題。經過了一下幾種狀況進行傳值：

• 經過路由params傳參
• 經過路由query傳參
• 經過vuex

1.經過params傳參

先在路由path裏那個組件須要傳遞參數，定義一個參數，用於組件傳遞，params刷新頁面數據會丟失。

path: "/chatView/:user"
//這裏值用:加參數的寫法，user即爲參數，注意必定要用/隔開

在你的組件中，經過點擊傳遞參數，targetUser傳的參數

而後須要用的組件接受，經過beforeRouteEnter進入路由以前執行的函數

 

1.經過query傳參

路由傳值有兩種方式，params和query，params傳值刷新頁面是要消失的，然而query卻不會，二者的區別就在於query會把傳遞的參數顯示在url地址中,就像下面這樣

也是在你的組件中，執行什麼方法。觸發什麼事件，把參數傳遞過去

JSON.stringify() 方法是將一個JavaScript值(對象或者數組)轉換爲一個 JSON字符串

 

 而後須要用的組件接受，經過beforeRouteEnter進入路由以前執行的函數

這樣不管怎麼刷新，數據都不會丟失。

3.經過vuex取

 最好辦的就是經過vuex來存和取你的數據，把你的數據都存在vuex中，而後那個組件須要，直接調用vuex的getters來獲取數據就行。

在你的getters文件中

在組件中若是想取到的話，直接經過計算屬性。

 

以上是路由傳參和vuex存值、傳值的時候刷新頁面數據消失的解決辦法。喜歡的能夠關注一下。