欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中使用router4 keepalive的問題

 更新時(shí)間:2022年08月13日 14:48:28   作者:懵懂的程序員小曲  
這篇文章主要介紹了vue3中使用router4 keepalive的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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實(shí)現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)

    這篇文章主要介紹了Vue多條件篩選功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • elementui中el-row的el-col排列混亂問題及解決

    elementui中el-row的el-col排列混亂問題及解決

    這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • Vue3偵聽器的實(shí)現(xiàn)原理詳情

    Vue3偵聽器的實(shí)現(xiàn)原理詳情

    這篇文章主要介紹了Vue3偵聽器的實(shí)現(xiàn)原理詳情,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-08-08
  • v-show和v-if的區(qū)別?及應(yīng)用場(chǎng)景

    v-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-06
  • vue三種模糊查詢方式代碼實(shí)例

    vue三種模糊查詢方式代碼實(shí)例

    這篇文章主要給大家介紹了關(guān)于vue三種模糊查詢方式的相關(guān)資料,在vue中模糊搜索主要是用computed屬性實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能

    VUE + 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-09
  • vue長(zhǎng)按事件和點(diǎn)擊事件沖突的解決

    vue長(zhǎng)按事件和點(diǎn)擊事件沖突的解決

    這篇文章主要介紹了vue長(zhǎng)按事件和點(diǎn)擊事件沖突的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue中的公共方法調(diào)用方式

    vue中的公共方法調(diào)用方式

    這篇文章主要介紹了vue中的公共方法調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 詳解nuxt路由鑒權(quán)(express模板)

    詳解nuxt路由鑒權(quán)(express模板)

    這篇文章主要介紹了詳解nuxt路由鑒權(quán)(express模板),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11
  • Vue路由守衛(wèi)詳解

    Vue路由守衛(wèi)詳解

    路由導(dǎo)航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導(dǎo)航過程中進(jìn)行攔截和控制,其中,beforeEach 導(dǎo)航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧
    2023-10-10

最新評(píng)論