首頁  >  文章  >  web前端  >  vue中頁面逆傳值簡單實作方法分享

vue中頁面逆傳值簡單實作方法分享

小云云
小云云原創
2018-05-15 11:34:552218瀏覽

本文我們主要和大家分享vue中頁面逆傳值簡單實作方法,我們都知道vue是單頁應用,輕量,不會重複下載資料。當它從一個頁面跳到另一個頁面時,原來的頁面的vue實例和相關數據已經銷毀了,要實現逆傳值就要找到操作的對象及它的一些屬性,希望能幫助到大家。

【需求】

  要實現的需求很簡單,頁面從A -> B,用戶在B觸發操作,將一些資料帶回A頁面,在網路上找了好久也只看到有人問,但總找不到很好答案。要實現的效果圖如下:

【聯想】

  在ios 開發中,頁面跳到A -> B -> C,到C 頁面後,記憶體中一直儲存著A 和B 頁面的資料和狀態,透過導航堆疊遍歷數組可以拿到先前的頁面進行修改賦值等,另外還有代理,block傳值等操作。  

  vue是一個單頁應用,輕量級,並且不會重複下載資料。當它從一個頁面跳到另一個頁面時,原來的頁面的vue實例和相關資料已經銷毀了,要實現逆傳值就要找到操作的物件及它的一些屬性。

【嘗試】

  在three 頁面中列印路由相關信息,如下:

  本來是想在其物件中查看是否有可操作的對象,但發現都不好操作甚至太麻煩,並不像ios 中一樣。然後嘗試對其中一些物件 prototype 或 __proto__ 主動添加想要儲存的數據,實際結果也是要么報錯不通過,要么路由切換時數據就沒了。

  這兩天又重新看了看vue的官網指導,發現除了全域路由有對應的時機方法,對於元件路由也有幾個對應的鉤子函數。

  在第三個頁面中實作 beforeRouteLeave,列印對應的參數發現確實可以拿到前後路由。如下:

【相關程式碼】

  /three 頁面中的input 與變數selVal 綁定,然後在此頁面的路由方法中,判斷如果是回第二個頁面,則將要傳的參數賦值到對應query 或params中,params 中的數值如果用戶刷新當前頁面參數值會丟失,而query則是拼接在url 後面,刷新頁面值也不會丟失。如下:

 beforeRouteLeave(to, from, next) {
  if (to.name == 'Two') {
   to.query.temp = this.selVal;
  }
  next();
 }

  在/two 頁面的mounted 方法中獲取對應的值

 mounted() {
  if (this.$route.query.temp) {
   this.temp = this.$route.query.temp;
  }
 }

  這樣就完了,真想說句靠,怎麼原來就沒發現呢,之前實現這些還想著keepalive 或使用vuex 等等,想想那麼麻煩多了。

  ps: 這種簡單的逆傳值是這樣實現沒錯,但如果/two 頁面在進入/three 頁面之前用戶進行了大量臨時性操作,到/three 頁頁回來還需要繼續保持這些大量的操作就比較困難了,這個就等下期博客貼出來了。

相關推薦:

vue數組更新方法詳解

vue元件中使用iframe元素的方法範例

vue組件的3種書寫形式詳解

以上是vue中頁面逆傳值簡單實作方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn