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