vue解決刷新頁面vuex數據、params參數消失的問題（params傳遞多個參數）

一般項目都會有一些邏輯需要傳遞值給另一個頁面，那麼有的時候就會出現一個問題：用戶刷新了頁面，誒？數據沒了，參數錯誤。那麼今天經過總結，解決了這個問題。我在最新的項目中，通過了一下幾種情況進行傳值：

1、通過路由傳值，params或query

2、通過vuex進行狀態管理 $store.state...

3、使用localStorage進行傳值

那麼，關於刷新頁面數據消失原因有兩種，一是通過路由params傳值，二是vuex傳值

一、通過路由params傳值

    路由傳值有兩種方式，params和query，params傳值刷新頁面是要消失的，然而query卻不會，兩者的區別就在於query會把傳遞的參數顯示在url地址中，就像這樣：/adminUser/001001001?jum=001001001211，參數過多的話url地址會變得非常難看，如果你並不在意url地址難看與否，那麼你可以不使用params，而是使用query，只是切換個單詞而已，這是一種方法（不是最優辦法）。

2019-6-28補充：如果想傳入多個參數寫法如下：

 path: '/adminCun/:jum/:id/:type

    還有一種方法，就是在定義路由的時候，給path設定參數，舉個例子，一看就懂

export default [{
  path: '/platform',
  component: Layout2,
  children: [{
    path: '/adminCun/:jum',        //這裏值用:加參數的寫法，jum即爲參數，注意一定要用/隔開(多參數傳遞如上代碼↑)
    name:'platformRecycleAdminCun',
    meta:{
      title:'管轄村級詳情'
    },
    component: resolve => require(['@/view/platform/recycle/admincun'],resolve)
  }]
}]

<template slot-scope="props">
  <el-button type="text" @click="$router.push({name:'platformRecycleAdminCun',params:{jum:props.row.jgNum}})">
    {{ props.row.jgName }}
  </el-button>
</template>

這樣就可以隨心所欲的刷新了。

二、還有一種就是使用vuex

    頁面刷新store.state中的數據消失是不可避免的，那麼使用localStorage來避免這個問題。發現問題的時候我就考慮到存數據在localStorage裏，但是一個一個數據添加實在是太蠢了。那麼就需要一個全局的方法來，將store的數據存儲在localStorage裏。具體的方法也是百度的很好用，也很方便。

    在App.vue中，created初始化生命週期中寫入以下方法

//在頁面刷新時將vuex裏的信息保存到localStorage裏
window.addEventListener("beforeunload",()=>{
  localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
})

//在頁面加載時讀取localStorage裏的狀態信息
localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));

replaceState這個方法呢，查了api，就是替換 store 的根狀態，然後通過對象賦值assign將localStorage進行賦值

beforeunload這個方法是在頁面刷新時觸發的，將store中的信息存入localStorage

這樣就通過localStorage來避免vuex刷新數據消失的問題了。

 

以上是路由傳參和vuex存值、傳值的時候刷新頁面數據消失的解決辦法。