解決vue頁(yè)面刷新或者后退參數(shù)丟失的問(wèn)題
更新時(shí)間：2018年03月13日 09:03:56 作者：panyox
下面小編就為大家分享一篇解決vue頁(yè)面刷新或者后退參數(shù)丟失的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在toB的項(xiàng)目中，會(huì)經(jīng)常遇到列表數(shù)據(jù)篩選查詢的情景，當(dāng)要打開某一項(xiàng)的詳情頁(yè)或者暫時(shí)離開列表頁(yè)，再返回（后退時(shí)），選擇的篩選條件會(huì)全部丟失，辛辛苦苦選擇好的條件全沒(méi)了，還得重新選擇，如果有分頁(yè)的更頭大，還得重新一頁(yè)頁(yè)翻到之前看到的那一頁(yè)，用戶體驗(yàn)極度不友好。
我的解決有兩種：
第一種方法：用vue 的<keep-alive>，即在<router-view>外套一層<keep-alive>。
雖然可以達(dá)到一定效果，但是控制起來(lái)比較麻煩，比如項(xiàng)目中并不是所有頁(yè)面都需要緩存，代碼寫起來(lái)復(fù)雜
第二種方法：直接用localStorage，簡(jiǎn)單粗暴（推薦）
代碼如下：
list.vue
export default {
data () {
return {
searchForm:{
project_name:'',
status:'',
city:'',
round:'',
fund:'',
charge:'',
page: 1
},
},
beforeRouteLeave(to, from, next){
//打開詳情頁(yè)（或者下一個(gè)任意界面）之前，把篩選條件保存到localStorage，如果離開列表頁(yè)并且打開的不是詳情頁(yè)則清除，也可以選擇不清除
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的局限性，不過(guò)可以通過(guò)使用cookie來(lái)彌補(bǔ)，具體不再詳述。
以上這篇解決vue頁(yè)面刷新或者后退參數(shù)丟失的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在 Vue.js 中，$router 和 $route 是兩個(gè)常用的對(duì)象，用于處理路由相關(guān)的操作，下面小編就來(lái)和大家介紹一下$router 和 $route 的區(qū)別以及如何使用它們吧2023-06-06
這篇文章主要介紹了element實(shí)現(xiàn)合并單元格通用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
本文會(huì)通過(guò)一個(gè)簡(jiǎn)單的vue-toast插件，來(lái)幫助了解掌握插件的開發(fā)和使用。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
vue3中實(shí)現(xiàn)異步組件的方法實(shí)例
前端開發(fā)經(jīng)常遇到異步的問(wèn)題,請(qǐng)求函數(shù)、鏈接庫(kù)等,下面這篇文章主要給大家介紹了關(guān)于vue3中實(shí)現(xiàn)異步組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
vue3 element-plus二次封裝組件系列之伸縮菜單制作
這篇文章主要介紹了vue3 element-plus二次封裝組件系列之伸縮菜單制作,是基于vue3 vite element-plus搭建的，值的注意的時(shí)候，里面的圖標(biāo)組件是經(jīng)過(guò)處理的，結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
本篇文章主要介紹了淺談vue項(xiàng)目如何打包扔向服務(wù)器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要給大家分享的是Vue組件傳值的幾種常用方式，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10