溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在toB的項目中，會經常遇到列表數據篩選查詢的情景，當要打開某一項的詳情頁或者暫時離開列表頁，再返回（后退時），選擇的篩選條件會全部丟失，辛辛苦苦選擇好的條件全沒了，還得重新選擇，如果有分頁的更頭大，還得重新一頁頁翻到之前看到的那一頁，用戶體驗極度不友好。
我的解決有兩種：
第一種方法：用vue 的<keep-alive>，即在<router-view>外套一層<keep-alive>。
雖然可以達到一定效果，但是控制起來比較麻煩，比如項目中并不是所有頁面都需要緩存，代碼寫起來復雜
第二種方法：直接用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頁面刷新或者后退參數丟失的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
