vue3中使用router4 keepalive的問題
vue3使用router4 keepalive問題
項(xiàng)目從vue2升級(jí)到vue3,路由也緊跟著升級(jí)到了4,然后在使用keep-alive的時(shí)候一直不生效,就去查文檔
vue2.x與vue3.0的App.vue配置有差異,在App.vue配置信息如下:
vue2.x中,router-view可整個(gè)放入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>
但是假如按照這樣配置,會(huì)有一個(gè)問題,假如A頁面時(shí)緩存頁面,跳轉(zhuǎn)到B頁面也是緩存頁面的話
就會(huì)是報(bào)Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function 這個(gè)錯(cuò)誤
所以 需要再中間中配置key值,來表示組件的唯一性和對(duì)應(yīng)關(guān)系,如::key="$route.path"
而且 不要?jiǎng)討B(tài)修改to.meta.keepAlive的值控制是否緩存。
會(huì)存在第一次將to.meta.keepAlive設(shè)置為true是還是會(huì)發(fā)送請(qǐng)求,因?yàn)榈谝淮问莿?chuàng)建組件,沒有緩存,需要緩存后,下一次進(jìn)入才不會(huì)發(fā)送請(qǐng)求。因?yàn)槿绻铋_始進(jìn)入的時(shí)候to.meta.keepAlive值為false的話,渲染的是沒有使用keep-alive的組件。
使用keepalive的坑
vue中使用keepAlive數(shù)據(jù)不刷新,只緩存第一次進(jìn)入的頁面數(shù)據(jù)。
需求
首頁進(jìn)入列表頁,根據(jù)不同id刷新列表頁面數(shù)據(jù),列表頁進(jìn)入詳情頁,詳情頁返回列表頁時(shí)不刷新。
<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 ?? ??? ?} },
這個(gè)路由是列表頁的路由,按照這種方式寫的話確實(shí)會(huì)緩存頁面,但是每次切換頁面的時(shí)候會(huì)導(dǎo)致數(shù)據(jù)還是舊的。
解決
首先在路由中配置isrefersh用來監(jiān)測(cè)頁面從新獲取數(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 ?? ??? ?} },
首頁
當(dāng)離開首頁時(shí)判斷是否去列表頁,去的話給isrefersh設(shè)置為true
beforeRouteLeave (to, from, next) {? ?? ?if(to.name=="MatchDetail" || to.name=="MatchDetail2") ?? ?{ ?? ??? ?to.meta.isrefersh = true; ?? ?} ?? ?next();? },
列表頁
進(jìn)入列表頁的時(shí)候設(shè)置keppAlive,然后通過isrefersh判斷是否刷新頁面
**注:**不用再created 或 mounted生命周期中調(diào)用接口了,beforeRouteEnter在每次進(jìn)入這個(gè)頁面的時(shí)候都會(huì)觸發(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();// 重新調(diào)用數(shù)據(jù)接口 ?? ?} }) }, beforeRouteLeave(to, from, next) { ?? ?from.meta.keepAlive= true ?? ?next(); },
詳情頁
在詳情頁中判斷如果返回列表頁設(shè)置keepAlive,并不需要刷新數(shù)據(jù)。
beforeRouteLeave (to, from, next) {? ?? ?if(to.name=="MatchDetail" || to.name=="MatchDetail2"){ ?? ??? ?to.meta.keepAlive = true;? ?? ??? ?to.meta.isrefersh=false;? ? ?? ?} ?? ?next() }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue實(shí)現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
這篇文章主要介紹了Vue多條件篩選功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05elementui中el-row的el-col排列混亂問題及解決
這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08v-show和v-if的區(qū)別?及應(yīng)用場(chǎng)景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場(chǎng)景,vue中v-show與?v-if的作用效果是相同的,都能控制元素在頁面是否顯示,但是也有一定的區(qū)別,下面文章梳理總結(jié)v-show和v-if的區(qū)別,需要的小伙伴可以參考一下2022-06-06VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡(jiǎn)單的實(shí)時(shí)定位示例,基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-09-09vue長(zhǎng)按事件和點(diǎn)擊事件沖突的解決
這篇文章主要介紹了vue長(zhǎng)按事件和點(diǎn)擊事件沖突的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10