vue使用keep-alive后從部分頁(yè)面進(jìn)入不緩存示例詳解
需求：
1：當(dāng)前有頁(yè)面A-B-C三個(gè)板塊；
2：從頁(yè)面C返回頁(yè)面B時(shí)，B頁(yè)面數(shù)據(jù)之前數(shù)據(jù)不會(huì)被清空（keep-alive），且C頁(yè)面攜帶到B頁(yè)面的數(shù)據(jù)緩存(event-bus/vuex)；
3：從A-頁(yè)面進(jìn)入B頁(yè)面時(shí)，B頁(yè)面為初始化狀態(tài)。
實(shí)現(xiàn)：
1：借用路由鉤子函數(shù)，在進(jìn)入B頁(yè)面時(shí)，對(duì)當(dāng)前頁(yè)面進(jìn)行兼容處理；
修改router路由中配置項(xiàng)
配置meta屬性和isBack標(biāo)識(shí)，判斷當(dāng)前頁(yè)面是從C頁(yè)面返回還是從其他頁(yè)面進(jìn)入，具體配置如下：
{
path: '/B',
name: 'B',
component: require('@/page/index.vue'),
meta: {
keepAlive: true, //當(dāng)前頁(yè)面是否緩存，搭配keep-alive使用
isBack: false // 判斷當(dāng)前頁(yè)面是從C頁(yè)面返回還是從其他頁(yè)面進(jìn)入，默認(rèn)從A頁(yè)面進(jìn)入
}
},
判斷當(dāng)前頁(yè)面是否需要緩存的頁(yè)面
再B頁(yè)面判斷當(dāng)前頁(yè)面跳轉(zhuǎn)方式，通過(guò)beforeRouteEnter(to, from, next)，來(lái)判斷路由是從哪里來(lái)跳轉(zhuǎn)的，如果是從C跳轉(zhuǎn)的，則將當(dāng)前路由對(duì)象的meta.isBack設(shè)置為true，否則設(shè)為false。具體實(shí)現(xiàn)如下：
beforeRouteEnter(to, from, next) {
if (from.path == "/C") {
to.meta.isBack = true;
} else {
to.meta.isBack = false;
}
next();
},
不需要緩存頁(yè)面，重置B頁(yè)面數(shù)據(jù)
從非C頁(yè)面進(jìn)入B頁(yè)面時(shí)，都應(yīng)重置當(dāng)前頁(yè)面數(shù)據(jù)，所以需要在頁(yè)面加載之前（即activated），將之前獲取到的數(shù)據(jù)以及查詢(xún)條件清空。
activated()與deactivated()是兩個(gè)生命周期鉤子(生命周期函數(shù))。
activated()與deactivated()是路由組件所獨(dú)有的兩個(gè)生命周期鉤子，用于捕獲路由組件的激活狀態(tài)。
activated路由組件被激活時(shí)觸發(fā)。
deactivated路由組件失活時(shí)觸發(fā)。
activated() {
let that = this;
// 第一次和非C頁(yè)面進(jìn)入B頁(yè)面時(shí) isBack都為false，即需要重置數(shù)據(jù)
if (!this.route.meta.isBack) {
// 重置數(shù)據(jù)操作
}
this.route.meta.isBack = false;
},總結(jié)
到此這篇關(guān)于vue使用keep-alive后從部分頁(yè)面進(jìn)入不緩存的文章就介紹到這了,更多相關(guān)keep-alive部分頁(yè)面進(jìn)入不緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue項(xiàng)目中如何安裝element組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了vue中屬性執(zhí)行順序,選項(xiàng)的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods，具體詳細(xì)內(nèi)容本文給大家講解的非常詳細(xì)，需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)web分頁(yè)組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì)
這篇文章主要介紹了淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì),在此之前先簡(jiǎn)單介紹一下Element的構(gòu)建流程，以便對(duì)比新的UI框架設(shè)計(jì)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件實(shí)例代碼
這篇文章介紹了vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件的實(shí)例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
使用vue-cli（vue腳手架）快速搭建項(xiàng)目的方法
本篇文章主要介紹了使用vue-cli（vue腳手架）快速搭建項(xiàng)目的方法，vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目，感興趣的小伙伴們可以參考一下2018-05-05
淺談vue3中effect與computed的親密關(guān)系
這篇文章主要介紹了淺談vue3中effect與computed的親密關(guān)系，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間詳解
在之前做個(gè)一個(gè)組件頁(yè)面中,引用了element-ui組件的日期選擇器,遇到的一個(gè)小問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后時(shí)間的相關(guān)資料,需要的朋友可以參考下2022-08-08
手把手教你寫(xiě)一個(gè)vue全局注冊(cè)的Toast的實(shí)現(xiàn)
本文主要介紹了手把手教你寫(xiě)一個(gè)vue全局注冊(cè)的Toast的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue使用mounted和created時(shí),this無(wú)法指向data中的數(shù)據(jù)問(wèn)題
這篇文章主要介紹了Vue使用mounted和created時(shí),this無(wú)法指向data中的數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07