業(yè)務(wù)需求

打野在A頁面野區(qū)進(jìn)行一波騷操作打了一只藍(lán)爸爸，然后點擊導(dǎo)航欄跑到B頁面的野區(qū)秀操作打了一只紅爸爸，然后他又回到A野區(qū)，希望A野區(qū)還是只有一只藍(lán)爸爸被打的狀態(tài)，其他野沒被偷

第一步

在路由里面設(shè)置需要緩存的頁面

第二步

使用keep-alive屬性包裹需要緩存的頁面使用v-if判斷，為true的是需要緩存的，false是不需要緩存的

第三步

在需要緩存的頁面設(shè)置導(dǎo)航鉤子，在A野區(qū)離開時將值設(shè)置為false保證離開當(dāng)前野區(qū)不被偷

第四步

在其他野區(qū)浪一波離開時設(shè)置為true,保證回到A野區(qū)的時候野區(qū)不被刷新，還是原來的狀態(tài)

補(bǔ)充知識：vue keep - alive 使用只有從固定頁面跳轉(zhuǎn)過來的才緩存當(dāng)前頁面

問題描述

使用 keep-alive + beforeRouteLeave 判斷進(jìn)入緩存頁面的時候設(shè)置 keep-alive為true或false 但是無法滿足需求 造成A頁面 跳轉(zhuǎn)到 B頁面之后 無緩存 C頁面跳轉(zhuǎn)到B頁面后 有緩存 但是 再次從A頁面跳轉(zhuǎn)到B頁面 B頁面跳轉(zhuǎn)C頁面完成后把上次的數(shù)據(jù)帶出來了

解決方法

A - B 或 C-B都設(shè)置緩存 觸發(fā)keep-alive的activated 鉤子 利用 vuex在B頁面判斷是從哪個頁面跳轉(zhuǎn)過來的 如果是從A頁面跳轉(zhuǎn)過來的 重置B頁面所有數(shù)據(jù) 否則不進(jìn)行任何操作就行了

以上這篇vue頁面跳轉(zhuǎn)實現(xiàn)頁面緩存操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。