Vue利用History記錄上一頁面的資料方法例項

2021-09-13 08:18:19 字數 1274 閱讀 1842

前言需求

從列表頁的第二頁進入詳情頁,返回時列表頁仍然顯示在第二頁;

從列表頁的第二頁進入詳情頁,返回時列表頁的篩選條件仍然存在。

技術選擇

使用vue-router元件,通過this.$router.push();方式,將頁碼和選擇條件作為引數儲存在url中,這種方式在上面的ui設計中是可行的,但是當列表頁中包含tab元件時(分頁元件是公用的),會因為push的因素(因為push會開啟新頁面)導致一些問題(ps:也可能是本人技術能力的原因),未實現。

使用history api(html5開始支援),通過history.replacestate方式,將頁碼作為引數儲存在url中,將選擇條件儲存在history中(尚不清楚資料具體是儲存在**);通過location.hash方式獲取頁碼;通過history.state方式獲取儲存的選擇條件。

具體實現--技術選擇2

開關為分頁元件新增乙個開關(openroute),因為需要灰度上線,萬一有問題,要調整的頁面也只有乙個。**如下:

``
分頁元件中儲存頁碼和選擇條件&獲取頁碼

``
列表頁面獲取選擇條件

目前可能是因為框架設計的問題,沒法在請求資料之前通過object.assign方式為替換初始變數,所以先這樣處理(笨方法,各位大佬有解決辦法麻煩指導下,謝謝):

``
已解決,初始變數不需要動,可以通過以下方式實現:

`if` `(history.state) `

`}``},`

這裡記錄下:之前以為created方法是在分頁元件的watch監聽之後執行的,後來發現被誤導了(因為之前是通過object.assign(true, this.form, history.state)方式實現資料賦值的,但是並沒有成功)。下面做個小總結:

object.assign(true, a, b);」和「object.assign(a, b);」有什麼區別?

結論:前者:改a不影響b;後者:改a影響b

faq需要使用history.replacestate方式是因為:它不會將更改後的url壓到history棧中,所以不會增加回退和前進的操作步數;

使用history.replacestate方式,可儲存的state大小不能操作640k;

可能存在瀏覽器相容性問題,請從此處查閱:

demo or source

因為是公司專案,所以目前沒有demo或原始碼

總結

Vue 使用History記錄上一頁面的資料

從列表頁的第二頁進入詳情頁,返回時列表頁仍然顯示在第二頁 從列表頁的第二頁進入詳情頁,返回時列表頁的篩選條件仍然存在。使用vue router元件,通過this.router.push 方式,將頁碼和選擇條件作為引數儲存在url中,這種方式在上面的ui設計中是可行的,但是當列表頁中包含tab元件時 ...

linux IPC 記錄上鎖

本節講述的是利用fcntl函式來實現不同程序間的上鎖,不管這些程序有沒有親緣關係。前面講述過有名訊號量同樣也是可以用在沒有親緣關係的程序間上鎖的。而針對執行緒上鎖的一些機制,想要用在不同程序間上鎖,就需要把鎖放在程序共享記憶體區操作。記錄上鎖主要是用到fcntl 函式。include include...

鎖 記錄上鎖

記錄鎖的功能是 當乙個程序正在讀或者修改檔案的某乙個部分時,它可以阻止其他程序修改同一檔案區。記錄鎖其實是 位元組範圍鎖,因為它鎖定的只是檔案中的乙個區域,也可能是整個檔案。1.基礎介紹 svr3通過fcntl函式增加了記錄鎖功能。fcntl函式的原型已經在以前給出,這邊再重複一次。include ...