vue傳參頁面重新整理資料丟失問題

摘要： 在做vue的時候，經常會遇到元件之間資料的傳遞問題，通過params或者query傳參，但是，當頁面重新整理的時候，資料會丟失，找不到資料。今天經過總結，解決了這個問題。通過了一下幾種情況進行傳值： 通過路由params傳參 通過路由query傳參 通過vuex ...

在做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存值、傳值的時候重新整理頁面資料消失的解決辦法。喜歡的可以關注一下。