環(huán)境
vue項目遮婶，頁面有搜索书蚪、篩選項等谢肾。
需求
頁面跳轉(zhuǎn)蟀俊，切換或者刷新钦铺，希望可以記住用戶在頁面的篩選狀態(tài)
方案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包括路由組件，去緩存頁面狀態(tài)烫映。
但是沼本，這樣并不能滿足刷新頁面依舊可以記住頁面狀態(tài)的需求。因為刷新瀏覽器頁面的時候锭沟，等于是刷新了整個vue實例應(yīng)用抽兆，所有vue緩存的數(shù)據(jù)都會丟失。
方案v2
基于方案1的缺陷族淮，衍生出了方案v2
- 為了滿足刷新頁面依然能夠記住頁面狀態(tài)辫红，我們需要把頁面狀態(tài)做持久化處理
- 在localStorage, sessionStorage, cookie三種方案中,我選擇了sessionStorage
- 然后只需要凭涂，在頁面刷新或者銷毀之前，記錄頁面需要記住的參數(shù)贴妻。然后在頁面加載的時候讀取之前存儲的參數(shù)切油。
為了可復(fù)用和盡量小的代碼侵入性。我把相關(guān)代碼封裝成了一個mixin名惩，代碼如下：
// 定義一個混入對象
let paramsMemoryMixin = {
data () {
return {
// 記住參數(shù)存儲的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()));
},
/**
* 需要記住的頁面參數(shù)
* @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绢片，并重寫存儲參數(shù)的鍵名： memoryParamsKey 和獲取緩存數(shù)據(jù)的方法 getMemoryParams () 。例如：
import memoryMixin from '文件路徑/params-memory-mixin.js';
export default {
mixins: [ memoryMixin ],
data () {
return {
// 記住參數(shù)存儲的key
memoryParamsKey: 'xx-xx-params'
}
},
methods: {
getMemoryParams () {
return {
key1: this.value1,
key2: this.value2,
key3: this.value3
};
}
}
}
方案V3
使用History API岛琼。當頁面查詢條件改變時底循，將頁面條件更新到當前歷史狀態(tài)。
// stateObj: 頁面條件狀態(tài)對象, title: 標題
history.replaceState(stateObj, "title");
然后槐瑞，在頁面加載后熙涤，獲取當前歷史state狀態(tài)，并做為初始參數(shù)
export default {
data () {
params: {}
},
created() {
this.params = history.state;
}
}
