解決vue頁面刷新或者后退參數(shù)丟失的問題
更新時(shí)間：2018年03月13日 09:03:56 作者：panyox
下面小編就為大家分享一篇解決vue頁面刷新或者后退參數(shù)丟失的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在toB的項(xiàng)目中，會經(jīng)常遇到列表數(shù)據(jù)篩選查詢的情景，當(dāng)要打開某一項(xiàng)的詳情頁或者暫時(shí)離開列表頁，再返回（后退時(shí)），選擇的篩選條件會全部丟失，辛辛苦苦選擇好的條件全沒了，還得重新選擇，如果有分頁的更頭大，還得重新一頁頁翻到之前看到的那一頁，用戶體驗(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)文章
pinia是vue3官方的狀態(tài)管理工具,當(dāng)然vue2也可以用,vue2中的狀態(tài)管理工具是vuex,vue3中不再使用vuex,推薦使用的是pinia,和vuex差不多,但比vuex更方便、更強(qiáng)、更好,下面這篇文章主要給大家介紹了關(guān)于Vue3之Pinia狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2022-11-11
利用Vue+ElementUi實(shí)現(xiàn)評論功能
這篇文章主要介紹了如何利用Vue+ElementUi實(shí)現(xiàn)評論功能,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-04-04
vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
今天小編就為大家分享一篇vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3實(shí)現(xiàn)刷新頁面局部內(nèi)容的示例代碼
本文主要介紹了Vue3實(shí)現(xiàn)刷新頁面局部內(nèi)容的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
隨著移動互聯(lián)網(wǎng)的發(fā)展,移動端app的使用越來越普及,而對于開發(fā)者來說如何設(shè)計(jì)一款簡單易用的app是一項(xiàng)不容忽視的工作,其中登錄頁面是app使用過程中最基礎(chǔ)的組成部分之一,這篇文章主要給大家介紹了關(guān)于用uniapp寫一個(gè)好看的登錄頁面的相關(guān)資料,需要的朋友可以參考下2024-03-03
關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號密碼查出用戶信息，根據(jù)用戶id與name生成token并返回，userinfo則是對token進(jìn)行獲取，在查出對應(yīng)值進(jìn)行返回，感興趣的朋友一起看看吧2022-05-05
vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了iview實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue中如何配置proxy代理問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01