解決vue頁面刷新或者后退參數(shù)丟失的問題
更新時(shí)間：2018年03月13日 09:03:56 作者：panyox
下面小編就為大家分享一篇解決vue頁面刷新或者后退參數(shù)丟失的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在toB的項(xiàng)目中，會(huì)經(jīng)常遇到列表數(shù)據(jù)篩選查詢的情景，當(dāng)要打開某一項(xiàng)的詳情頁或者暫時(shí)離開列表頁，再返回（后退時(shí)），選擇的篩選條件會(huì)全部丟失，辛辛苦苦選擇好的條件全沒了，還得重新選擇，如果有分頁的更頭大，還得重新一頁頁翻到之前看到的那一頁，用戶體驗(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.js 中，$router 和 $route 是兩個(gè)常用的對象，用于處理路由相關(guān)的操作，下面小編就來和大家介紹一下$router 和 $route 的區(qū)別以及如何使用它們吧2023-06-06
這篇文章主要介紹了element實(shí)現(xiàn)合并單元格通用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
本文會(huì)通過一個(gè)簡單的vue-toast插件，來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
vue3中實(shí)現(xiàn)異步組件的方法實(shí)例
前端開發(fā)經(jīng)常遇到異步的問題,請求函數(shù)、鏈接庫等,下面這篇文章主要給大家介紹了關(guān)于vue3中實(shí)現(xiàn)異步組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
vue3 element-plus二次封裝組件系列之伸縮菜單制作
這篇文章主要介紹了vue3 element-plus二次封裝組件系列之伸縮菜單制作,是基于vue3 vite element-plus搭建的，值的注意的時(shí)候，里面的圖標(biāo)組件是經(jīng)過處理的，結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說明，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
本篇文章主要介紹了淺談vue項(xiàng)目如何打包扔向服務(wù)器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要給大家分享的是Vue組件傳值的幾種常用方式，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10