這兩天在專案中有個新需求：在當前頁面中的有很多資料，過濾資料的條件有時間，頁碼，型別，id搜尋….，假設我在頁面中選擇的某段時間，某個型別，現在我需要把握當前看到的資訊完全展現給另一朋友。
server端環境：時間和頁碼可以動態的傳遞到後端

一. 初步解決方案

剛看此需求首先想到的是vue—router的動態傳參，於是就開始碼程式碼。將過濾條件相關的變數動態的傳說路由中

  this.$router.push({query:{date:..,page:..}})

首次進入頁面時，取出路由中的query引數

this.$route.query

整體思路就是這樣，測試發現個嚴重的問題，
1.頁面重新整理的問題，在瀏覽中手動更改query時頁面不會重新整理（vue路由問題，下面會說到）
查閱官方文件發現文件中有此段話：

問題1按照官方給出的方式解決：

watch:{
"$route":function(val,oldVal){
...
location.reload()
...
}
}

路由重新整理問題搞定

問題2 暫時寫個公共方法來解決

在次測試時發現，只要我路由引數變化都會重新重新整理整個頁面（我只想重新請求資料），思考解決方法…..

二.優化方案

過程：為了達到我想要的效果，把路由變化的過程梳理一下。

1. 需要全域性的變數來儲存query中的值（Vuex）
2. 需要一個開關來控制是否重新整理頁面（Vuex）
3. 初始化頁面時將路由中的query下發到頁面相對應的變數
4. 頁面引數變化是動態的改變路由
   理清楚路由變化之後開始實現
   *儲存路由query和控制是否重新整理頁面的值都用Vuex來實現

new Vuex.Store({
    state:{
     //控制頁面重新整理
     isRefresh: true,
      //儲存路由中query的值
     queryParams:{}
      },
    mutations: {
    test (state) {
      // 變更狀態
 

      state.queryParams = {
      id:"test"
      }
          },
    test2(state) {
      state.isRefresh = "test"
   }
  }
  })

初始化頁面時將路由中的query下發到頁面用公共方法**

//obj傳入當前頁面的data即（this.$data確保query中引數key都是data的屬性值）
//queryParams傳入當前頁面路由的query值

Vue.prototype.$initData=function(obj,queryParams){

     //使用雙重迴圈給this.$data中的屬性賦值
}

頁面引數變化是動態的改變路由寫個公共方法給路由賦值就行了

三 總結

這個功能的實現是我對vue有了更加深入的瞭解，vue能從眾多的前端框架中脫穎而出跟他與時俱進的開發理念，以及前端專案中的各種相關生態的良好支援有著很大的關係。之前剛接觸vue時，就被他前端專案的一鍵部署以及通俗易懂的開發文件深深的吸引。越是深入瞭解他的本質，就越發的覺得vue設計思想的wonderful…….