vue3中使用router4 keepalive的問題
vue3使用router4 keepalive問題
項目從vue2升級到vue3,路由也緊跟著升級到了4,然后在使用keep-alive的時候一直不生效,就去查文檔
vue2.x與vue3.0的App.vue配置有差異,在App.vue配置信息如下:
vue2.x中,router-view可整個放入keepalive中,如下:
<template> ?? ?<!-- vue2.x配置 --> ? ?<keep-alive> ? ? <router-view v-if="$route.meta.keepAlive" /> ? </keep-alive> ? <router-view v-if="!$route.meta.keepAlive"/> </template>
<template> ? <!-- vue3.0配置 --> ? <router-view v-slot="{ Component }"> ? ? <keep-alive> ? ? ? <component :is="Component" ?v-if="$route.meta.keepAlive"/> ? ? </keep-alive> ? ? <component :is="Component" ?v-if="!$route.meta.keepAlive"/> ? </router-view>? </template>
但是假如按照這樣配置,會有一個問題,假如A頁面時緩存頁面,跳轉到B頁面也是緩存頁面的話
就會是報Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function 這個錯誤
所以 需要再中間中配置key值,來表示組件的唯一性和對應關系,如::key="$route.path"
而且 不要動態(tài)修改to.meta.keepAlive的值控制是否緩存。
會存在第一次將to.meta.keepAlive設置為true是還是會發(fā)送請求,因為第一次是創(chuàng)建組件,沒有緩存,需要緩存后,下一次進入才不會發(fā)送請求。因為如果最開始進入的時候to.meta.keepAlive值為false的話,渲染的是沒有使用keep-alive的組件。
使用keepalive的坑
vue中使用keepAlive數(shù)據(jù)不刷新,只緩存第一次進入的頁面數(shù)據(jù)。
需求
首頁進入列表頁,根據(jù)不同id刷新列表頁面數(shù)據(jù),列表頁進入詳情頁,詳情頁返回列表頁時不刷新。
<keep-alive> ?? ??? ?<router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> ?? ??? ?<router-view v-if="!$route.meta.keepAlive"> </router-view>
{ ?? ??? ?path: '/detail/:type/:articleId/:expertId/:status/:synMatchId/:matchType', ?? ??? ?name: 'Detail', ?? ??? ?component: () => import( /* webpackChunkName: "detail" */ '../views/Detail'), ?? ??? ?meta: { ?? ??? ??? ?hidden: true, ?? ??? ??? ?title: "詳情" ?? ??? ?} }, { ?? ??? ?path: '/match/detail/:id', ?? ??? ?name: 'MatchDetail', ?? ??? ?component: () => import( /* webpackChunkName: "matchdetail" */ '../views/Match/detail.vue'), ?? ??? ?meta: { ?? ??? ??? ?hidden: true, ?? ??? ??? ?title: "詳情", ?? ??? ??? ?keepAlive: true ?? ??? ?} },
這個路由是列表頁的路由,按照這種方式寫的話確實會緩存頁面,但是每次切換頁面的時候會導致數(shù)據(jù)還是舊的。
解決
首先在路由中配置isrefersh用來監(jiān)測頁面從新獲取數(shù)據(jù)
{ ?? ??? ?path: '/detail/:type/:articleId/:expertId/:status/:synMatchId/:matchType', ?? ??? ?name: 'Detail', ?? ??? ?component: () => import( /* webpackChunkName: "detail" */ '../views/Detail'), ?? ??? ?meta: { ?? ??? ??? ?hidden: true, ?? ??? ??? ?title: "詳情", ?? ??? ??? ?isrefersh:true ?? ??? ?} }, { ?? ??? ?path: '/match/detail/:id', ?? ??? ?name: 'MatchDetail', ?? ??? ?component: () => import( /* webpackChunkName: "matchdetail" */ '../views/Match/detail.vue'), ?? ??? ?meta: { ?? ??? ??? ?hidden: true, ?? ??? ??? ?title: "詳情", ?? ??? ??? ?keepAlive: true, ?? ??? ??? ?isrefersh:true ?? ??? ?} },
首頁
當離開首頁時判斷是否去列表頁,去的話給isrefersh設置為true
beforeRouteLeave (to, from, next) {? ?? ?if(to.name=="MatchDetail" || to.name=="MatchDetail2") ?? ?{ ?? ??? ?to.meta.isrefersh = true; ?? ?} ?? ?next();? },
列表頁
進入列表頁的時候設置keppAlive,然后通過isrefersh判斷是否刷新頁面
**注:**不用再created 或 mounted生命周期中調用接口了,beforeRouteEnter在每次進入這個頁面的時候都會觸發(fā)
beforeRouteEnter(to, from, next){? ?? ?to.meta.keepAlive= true;? ?? ?next(vm=>{? ?? ?//這里把頁面初始值重新賦值,以刷新頁面? ?? ?if(vm.$route.meta.isrefersh){? ?? ??? ??? ?vm.programmeData=[] ?? ??? ??? ?vm.$route.meta.isrefersh=false; ?? ??? ??? ?vm.init();// 重新調用數(shù)據(jù)接口 ?? ?} }) }, beforeRouteLeave(to, from, next) { ?? ?from.meta.keepAlive= true ?? ?next(); },
詳情頁
在詳情頁中判斷如果返回列表頁設置keepAlive,并不需要刷新數(shù)據(jù)。
beforeRouteLeave (to, from, next) {? ?? ?if(to.name=="MatchDetail" || to.name=="MatchDetail2"){ ?? ??? ?to.meta.keepAlive = true;? ?? ??? ?to.meta.isrefersh=false;? ? ?? ?} ?? ?next() }
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
基于Vue實現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
這篇文章主要介紹了Vue多條件篩選功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05elementui中el-row的el-col排列混亂問題及解決
這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例,基于VUE + OPENLAYERS實現(xiàn)實時定位功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-09-09