解決vue頁面刷新或者后退參數(shù)丟失的問題
在toB的項(xiàng)目中,會經(jīng)常遇到列表數(shù)據(jù)篩選查詢的情景,當(dāng)要打開某一項(xiàng)的詳情頁或者暫時(shí)離開列表頁,再返回(后退時(shí)),選擇的篩選條件會全部丟失,辛辛苦苦選擇好的條件全沒了,還得重新選擇,如果有分頁的更頭大,還得重新一頁頁翻到之前看到的那一頁,用戶體驗(yàn)極度不友好。
我的解決有兩種:
第一種方法:用vue 的<keep-alive>,即在<router-view>外套一層<keep-alive>。
雖然可以達(dá)到一定效果,但是控制起來比較麻煩,比如項(xiàng)目中并不是所有頁面都需要緩存,代碼寫起來復(fù)雜
第二種方法:直接用localStorage,簡單粗暴(推薦)
代碼如下:
list.vue
export default {
data () {
return {
searchForm:{
project_name:'',
status:'',
city:'',
round:'',
fund:'',
charge:'',
page: 1
},
},
beforeRouteLeave(to, from, next){
//打開詳情頁(或者下一個(gè)任意界面)之前,把篩選條件保存到localStorage,如果離開列表頁并且打開的不是詳情頁則清除,也可以選擇不清除
if (to.name == 'Detail') {
let condition = JSON.stringify(this.searchForm)
localStorage.setItem('condition', condition)
}else{
localStorage.removeItem('condition')
}
next()
},
created(){
//從localStorage中讀取條件并賦值給查詢表單
let condition = localStorage.getItem('condition')
if (condition != null) {
this.searchForm = JSON.parse(condition)
}
this.$http.get('http://example.com/api/test', {params: this.searchForm})
.then((response)=>{
console.log(response.data)
}).catch((error)=>{
console.log(error)
})
}
}
}
這種方法也受限于localStorage的局限性,不過可以通過使用cookie來彌補(bǔ),具體不再詳述。
以上這篇解決vue頁面刷新或者后退參數(shù)丟失的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
利用Vue+ElementUi實(shí)現(xiàn)評論功能
這篇文章主要介紹了如何利用Vue+ElementUi實(shí)現(xiàn)評論功能,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-04-04
vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
今天小編就為大家分享一篇vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3實(shí)現(xiàn)刷新頁面局部內(nèi)容的示例代碼
本文主要介紹了Vue3實(shí)現(xiàn)刷新頁面局部內(nèi)容的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號密碼查出用戶信息,根據(jù)用戶id與name生成token并返回,userinfo則是對token進(jìn)行獲取,在查出對應(yīng)值進(jìn)行返回,感興趣的朋友一起看看吧2022-05-05
vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10

