Vue頁面刷新記住頁面狀態(tài)的實(shí)現(xiàn)
環(huán)境
vue項(xiàng)目,頁面有搜索、篩選項(xiàng)等。
需求
頁面跳轉(zhuǎn),切換或者刷新,希望可以記住用戶在頁面的篩選狀態(tài)
方案v1
vue有提供一種緩存組件的解決方案 — keep-alive。
緩存不活動(dòng)的組件實(shí)例,而不是銷毀它們。
<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)的需求。因?yàn)樗⑿聻g覽器頁面的時(shí)候,等于是刷新了整個(gè)vue實(shí)例應(yīng)用,所有vue緩存的數(shù)據(jù)都會(huì)丟失。
方案v2
基于方案1的缺陷,衍生出了方案v2
- 為了滿足刷新頁面依然能夠記住頁面狀態(tài),我們需要把頁面狀態(tài)做持久化處理
- 在localStorage, sessionStorage, cookie三種方案中,我選擇了sessionStorage
- 然后只需要,在頁面刷新或者銷毀之前,記錄頁面需要記住的參數(shù)。然后在頁面加載的時(shí)候讀取之前存儲(chǔ)的參數(shù)。
為了可復(fù)用和盡量小的代碼侵入性。我把相關(guān)代碼封裝成了一個(gè)mixin,代碼如下:
// 定義一個(gè)混入對(duì)象 let paramsMemoryMixin = { data () { return { // 記住參數(shù)存儲(chǔ)的key, 請(qǐng)?jiān)谝迷搈ixin的組件中重寫 memoryParamsKey: 'nb-memory-params' } }, created: function () { this.initParams(); // 在頁面刷新時(shí)將篩選信息保存到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('請(qǐng)重寫paramsMemoryMixin的getMemoryParams方法'); } }, beforeDestroy () { window.removeEventListener('beforeunload', this.onPageUnload); }, beforeRouteLeave (to, from, next) { this.onPageUnload(); next(); } }; export default paramsMemoryMixin;
然后,在需要緩存的頁面,引入該mixin,并重寫存儲(chǔ)參數(shù)的鍵名: memoryParamsKey 和獲取緩存數(shù)據(jù)的方法 getMemoryParams () 。例如:
import memoryMixin from '文件路徑/params-memory-mixin.js'; export default { mixins: [ memoryMixin ], data () { return { // 記住參數(shù)存儲(chǔ)的key memoryParamsKey: 'xx-xx-params' } }, methods: { getMemoryParams () { return { key1: this.value1, key2: this.value2, key3: this.value3 }; } } }
至此,問題解決。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:vue 中url 鏈接左邊的小圖標(biāo)更改問題
欄 目:JavaScript
下一篇:vue 中 elment-ui table合并上下兩行相同數(shù)據(jù)單元格
本文標(biāo)題:Vue頁面刷新記住頁面狀態(tài)的實(shí)現(xiàn)
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9364.html
您可能感興趣的文章
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 01-10在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)
- 01-10Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡單方法
- 01-10微信小程序跨頁面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析
- 01-10Vue filter 過濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果
- 01-10Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法
- 01-10Vue+Node服務(wù)器查詢Mongo數(shù)據(jù)庫及頁面數(shù)據(jù)傳遞操作實(shí)例分析
- 01-10vue中根據(jù)時(shí)間戳判斷對(duì)應(yīng)的時(shí)間(今天 昨天 前天)
- 01-10Vue+Node實(shí)現(xiàn)的商城用戶管理功能示例
- 01-10vue實(shí)現(xiàn)拖拽效果


閱讀排行
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 08-05織夢dedecms什么時(shí)候用欄目交叉功能?
- 01-10delphi制作wav文件的方法
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子