Vue專案中路由動態傳參功能相關實現

暴走的snail發表於2018-05-23
Vue路由

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

一. 初步解決方案

剛看此需求首先想到的是vue—router的動態傳參，於是就開始碼程式碼。將過濾條件相關的變數動態的傳說路由中
複製程式碼
  this.$router.push({query:{date:..,page:..}})
複製程式碼

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

this.$route.query
複製程式碼

整體思路就是這樣，測試發現個嚴重的問題， 1.頁面重新整理的問題，在瀏覽中手動更改query時頁面不會重新整理（vue路由問題，下面會說到） 查閱官方文件發現文件中有此段話：記住引數或查詢的改變並不會觸發進入/離開的導航守衛。你可以通過觀察 $route 物件來應對這些變化，或使用 beforeRouteUpdate 的元件內守衛。 2.專案是單頁面，元件之間傳值（同級元件）是非常大問題，我需要在每個頁面中寫一遍程式碼（不能忍）

問題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.......

相關文章