溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
環境
vue項目，頁面有搜索、篩選項等。
需求
頁面跳轉，切換或者刷新，希望可以記住用戶在頁面的篩選狀態
方案v1
vue有提供一種緩存組件的解決方案 — keep-alive。
緩存不活動的組件實例，而不是銷毀它們。
<keep-alive> <router-view v-if="$route.meta.keepAlive" class="app-middle-content"/> </keep-alive> <router-view v-if="!$route.meta.keepAlive" class="app-middle-content"/>
我們可以使用keep-alive包括路由組件，去緩存頁面狀態。
但是，這樣并不能滿足刷新頁面依舊可以記住頁面狀態的需求。因為刷新瀏覽器頁面的時候，等于是刷新了整個vue實例應用，所有vue緩存的數據都會丟失。
方案v2
基于方案1的缺陷，衍生出了方案v2
為了可復用和盡量小的代碼侵入性。我把相關代碼封裝成了一個mixin，代碼如下：
// 定義一個混入對象
let paramsMemoryMixin = {
data () {
return {
// 記住參數存儲的key, 請在引用該mixin的組件中重寫
memoryParamsKey: 'nb-memory-params'
}
},
created: function () {
this.initParams();
// 在頁面刷新時將篩選信息保存到sessionStorage里
window.addEventListener('beforeunload', this.onPageUnload);
},
methods: {
initParams () {
let userParams = JSON.parse(sessionStorage.getItem(this.memoryParamsKey));
for (let key in userParams) {
this[key] = userParams[key];
}
},
onPageUnload () {
sessionStorage.setItem(this.memoryParamsKey, JSON.stringify(this.getMemoryParams()));
},
/**
* 需要記住的頁面參數
* @return { key: value }
*/
getMemoryParams () {
throw Error('請重寫paramsMemoryMixin的getMemoryParams方法');
}
},
beforeDestroy () {
window.removeEventListener('beforeunload', this.onPageUnload);
},
beforeRouteLeave (to, from, next) {
this.onPageUnload();
next();
}
};
export default paramsMemoryMixin;
然后，在需要緩存的頁面，引入該mixin，并重寫存儲參數的鍵名： memoryParamsKey 和獲取緩存數據的方法 getMemoryParams () 。例如：
import memoryMixin from '文件路徑/params-memory-mixin.js';
export default {
mixins: [ memoryMixin ],
data () {
return {
// 記住參數存儲的key
memoryParamsKey: 'xx-xx-params'
}
},
methods: {
getMemoryParams () {
return {
key1: this.value1,
key2: this.value2,
key3: this.value3
};
}
}
}
至此，問題解決。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
