您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue如何實(shí)現(xiàn)列表頁緩存的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇vue如何實(shí)現(xiàn)列表頁緩存文章都會(huì)有所收獲,下面我們一起來看看吧。
提了一個(gè)需求,希望公眾號(hào)內(nèi)的商城能夠像app一樣,從商品詳情頁跳轉(zhuǎn)至列表頁及其他列表頁時(shí),可以實(shí)現(xiàn)列表頁緩存(數(shù)據(jù)不刷新、位置固定到之前點(diǎn)的商品的位置)
本來想著scrollBehavior應(yīng)該可以滿足,但是實(shí)際操作中發(fā)現(xiàn):如果列表帶著分頁,位置是不會(huì)定位到點(diǎn)擊的位置的
在網(wǎng)上轉(zhuǎn)了一圈,終于找到適合自己的方法——beforeRouteLeave
注:beforeRouteLeave只對(duì)一級(jí)頁面起作用,不適用于children中的其他二級(jí)或其他級(jí)別的頁面
以上是準(zhǔn)備工作,接下來 可以步入正題了:
找到入口掛載頁面:App.vue 在router-view外部包裹一個(gè)keep-alive的標(biāo)簽
因?yàn)椴皇撬许撁娑夹枰彺妫园研枰彺娴捻撁嬷屑尤雗ame值,并將name值加入keep-alive中
<keep-alive v-if="isRouterAlive" include="starShop" > <router-view></router-view> </keep-alive>
當(dāng)然,僅僅是這些,是不能實(shí)現(xiàn)緩存的,
剛開始我是學(xué)著網(wǎng)上的方法,這樣寫的,當(dāng)從列表點(diǎn)入詳情頁時(shí),就將 列表頁的keepalive值,賦為true (實(shí)現(xiàn)緩存)
beforeRouteLeave(to, from, next) { if(from.path == '/sale/newGoods/index' && to.path == '/goods/detail') { from.meta.keepAlive = true; this.loading = true; next(); return } else { from.meta.keepAlive = false; window.location.reload(); this.$destroy(); next(); return } },
但是后期甲爸爸發(fā)現(xiàn)一個(gè)bug: 當(dāng)我從列表一點(diǎn)擊進(jìn)入詳情之后,如果直接從詳情頁,點(diǎn)擊進(jìn)入別的店鋪列表頁,即列表二,最新的列表頁內(nèi)展示的商品列表是之前的數(shù)據(jù),并沒有變?yōu)樽钚碌牡赇伭斜韮?nèi)容 , 即列表二頁面展示的還是列表一的商品
要看解決辦法的直接來這 ↓↓↓↓↓↓
首先摒棄上面的列表頁面的方法
第一步:找到商品詳情頁,最為主角之一,我在這里用到了beforeRouteEnter、beforeRouteLeave
beforeRouteEnter (to, from, next) { next(vm =>{ vm.formUrl = from.path; console.log(vm.formUrl) }); }, beforeRouteLeave(to, from, next) { to.meta.keepAlive = false; if(to.path == this.formUrl){ to.meta.keepAlive = true; next(); return }else{ to.meta.KeepAlive = false; window.localStorage.removeItem('isRefresh') this.$destroy(); next(); return } },
beforeRouteEnter:進(jìn)入路由之前執(zhí)行的函數(shù)(拿到列表一的路由)
beforeRouteLeave:離開路由之前執(zhí)行的函數(shù)(拿到列表二的路由)
通過這兩個(gè)鉤子,可以成功的拿到事件的另外兩位主角路由(列表一、列表二)
在詳情頁中,當(dāng)離開該頁之前,在beforeRouteLeave內(nèi)進(jìn)行列表一、列表二的路由比較
若兩路由相同,則跳轉(zhuǎn)目的頁面(to.meta.keepAlive)值為true,列表頁面進(jìn)行緩存(比如從詳情頁返回的時(shí)候)
若兩路由不同,則跳轉(zhuǎn)目的頁面發(fā)生了變化(比如從鞋帽列表——>鞋子商品——>鞋子列表),則鞋子列表頁面不需要緩存,需要刷新獲取最新的鞋子列表數(shù)據(jù)
第二步:處理事件的第二主角——列表頁面
這里我僅用到了beforeRouteEnter
這個(gè)鉤子中,我們可以拿到當(dāng)前頁面的keepAlive值
這個(gè)值是在詳情頁中就已經(jīng)給定的
如果是true,表示緩存,否則為不緩存(刷新)
防止頁面一直刷新,變成死亡函數(shù),我們要在data中聲明一個(gè)變量isRefresh
isRefresh: window.localStorage.getItem('isRefresh') || true
beforeRouteEnter (to, from, next) { next(vm =>{ if(to.meta.keepAlive != true && to.meta.keepAlive != null){ vm.goods=[]; window.localStorage.setItem('isRefresh',true) if(JSON.stringify(window.localStorage.getItem('isRefresh')) != false){ window.localStorage.setItem('isRefresh',false) location.reload(); } } }); return },
如果當(dāng)前頁to.meta.keepAlive值不為true,且值存在,則需刷新頁面
防止頁面一直刷新,
window.localStorage.setItem('isRefresh',true)
設(shè)置緩存變量isRefresh,值為true(表示需要刷新)
當(dāng)to.meta.keepAlive值不為true且isRefresh值為true,頁面刷新,且isRefresh賦值為false,即關(guān)閉刷新
vm.goods=[];是當(dāng)頁面跳去新的列表頁刷新之前,會(huì)出現(xiàn)短暫的列表展示,為了避免不必要的誤導(dǎo),在檢測到是跳轉(zhuǎn)到新的列表頁時(shí),我將列表頁的goods列表情況,視覺感受會(huì)好一些,因項(xiàng)目不同而異,不需要可以去掉,多張頁面之間跳轉(zhuǎn),判斷是否需要緩存或刷新獲取新數(shù)據(jù),就是這樣了。
Vue具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
關(guān)于“vue如何實(shí)現(xiàn)列表頁緩存”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“vue如何實(shí)現(xiàn)列表頁緩存”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。