在toB的項目中，會經(jīng)常遇到列表數(shù)據(jù)篩選查詢的情景，當要打開某一項的詳情頁或者暫時離開列表頁，再返回（后退時），選擇的篩選條件會全部丟失，辛辛苦苦選擇好的條件全沒了，還得重新選擇，如果有分頁的更頭大，還得重新一頁頁翻到之前看到的那一頁，用戶體驗極度不友好。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比廣西網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式廣西網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋廣西地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。
我的解決有兩種：
第一種方法：用vue 的
雖然可以達到一定效果，但是控制起來比較麻煩，比如項目中并不是所有頁面都需要緩存，代碼寫起來復(fù)雜
第二種方法：直接用localStorage，簡單粗暴（推薦）
代碼如下：
list.vue
重慶分公司
重慶分公司
export default {
data () {
return {
searchForm:{
project_name:'',
status:'',
city:'',
round:'',
fund:'',
charge:'',
page: 1
},
},
beforeRouteLeave(to, from, next){
//打開詳情頁（或者下一個任意界面）之前，把篩選條件保存到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來彌補，具體不再詳述。
以上這篇解決vue頁面刷新或者后退參數(shù)丟失的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。
