下面我就為大家分享一篇解決vue頁面刷新或後退參數遺失的問題,具有很好的參考價值,希望對大家有幫助。
在toB的項目中,會經常遇到列表資料篩選查詢的情景,當要打開某一項的詳情頁或暫時離開列表頁,再返回(後退時),選擇的篩選條件會全部遺失,辛苦選擇好的條件全沒了,還得重新選擇,如果有分頁的更頭大,還得重新一頁頁翻到之前看到的那一頁,用戶體驗極度不友善。
我的解有兩種:
#第一種方法:用vue的
雖然可以達到一定效果,但是控制起來比較麻煩,例如專案中並不是所有頁面都需要緩存,程式碼寫起來複雜
第二種方法: 直接用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) }) } } }
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
以上是解決vue頁面刷新或後退參數遺失的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!