您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue使用keep-alive后從部分頁面進(jìn)入不緩存怎么解決的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇vue使用keep-alive后從部分頁面進(jìn)入不緩存怎么解決文章都會有所收獲,下面我們一起來看看吧。
1:當(dāng)前有頁面A-B-C三個板塊;
2:從頁面C返回頁面B時,B頁面數(shù)據(jù)之前數(shù)據(jù)不會被清空(keep-alive),且C頁面攜帶到B頁面的數(shù)據(jù)緩存(event-bus/vuex);
3:從A-頁面進(jìn)入B頁面時,B頁面為初始化狀態(tài)。
1:借用路由鉤子函數(shù),在進(jìn)入B頁面時,對當(dāng)前頁面進(jìn)行兼容處理;
配置meta屬性和isBack標(biāo)識,判斷當(dāng)前頁面是從C頁面返回還是從其他頁面進(jìn)入,具體配置如下:
{ path: '/B', name: 'B', component: require('@/page/index.vue'), meta: { keepAlive: true, //當(dāng)前頁面是否緩存,搭配keep-alive使用 isBack: false // 判斷當(dāng)前頁面是從C頁面返回還是從其他頁面進(jìn)入,默認(rèn)從A頁面進(jìn)入 } },
再B頁面判斷當(dāng)前頁面跳轉(zhuǎn)方式,通過beforeRouteEnter(to, from, next),來判斷路由是從哪里來跳轉(zhuǎn)的,如果是從C跳轉(zhuǎn)的,則將當(dāng)前路由對象的meta.isBack設(shè)置為true,否則設(shè)為false。具體實現(xiàn)如下:
beforeRouteEnter(to, from, next) { if (from.path == "/C") { to.meta.isBack = true; } else { to.meta.isBack = false; } next(); },
從非C頁面進(jìn)入B頁面時,都應(yīng)重置當(dāng)前頁面數(shù)據(jù),所以需要在頁面加載之前(即activated),將之前獲取到的數(shù)據(jù)以及查詢條件清空。
activated()與deactivated()是兩個生命周期鉤子(生命周期函數(shù))。
activated()與deactivated()是路由組件所獨有的兩個生命周期鉤子,用于捕獲路由組件的激活狀態(tài)。
activated路由組件被激活時觸發(fā)。
deactivated路由組件失活時觸發(fā)。
activated() { let that = this; // 第一次和非C頁面進(jìn)入B頁面時 isBack都為false,即需要重置數(shù)據(jù) if (!this.route.meta.isBack) { // 重置數(shù)據(jù)操作 } this.route.meta.isBack = false; },
關(guān)于“vue使用keep-alive后從部分頁面進(jìn)入不緩存怎么解決”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vue使用keep-alive后從部分頁面進(jìn)入不緩存怎么解決”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。