vue3使用router4 keepalive
懵懂的程序员小曲 人气:5vue3使用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"
而且 不要动态修改to.meta.keepAlive的值控制是否缓存。
会存在第一次将to.meta.keepAlive设置为true是还是会发送请求,因为第一次是创建组件,没有缓存,需要缓存后,下一次进入才不会发送请求。因为如果最开始进入的时候to.meta.keepAlive值为false的话,渲染的是没有使用keep-alive的组件。
使用keepalive的坑
vue中使用keepAlive数据不刷新,只缓存第一次进入的页面数据。
需求
首页进入列表页,根据不同id刷新列表页面数据,列表页进入详情页,详情页返回列表页时不刷新。
<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 } },
这个路由是列表页的路由,按照这种方式写的话确实会缓存页面,但是每次切换页面的时候会导致数据还是旧的。
解决
首先在路由中配置isrefersh用来监测页面从新获取数据
{ 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在每次进入这个页面的时候都会触发
beforeRouteEnter(to, from, next){ to.meta.keepAlive= true; next(vm=>{ //这里把页面初始值重新赋值,以刷新页面 if(vm.$route.meta.isrefersh){ vm.programmeData=[] vm.$route.meta.isrefersh=false; vm.init();// 重新调用数据接口 } }) }, beforeRouteLeave(to, from, next) { from.meta.keepAlive= true next(); },
详情页
在详情页中判断如果返回列表页设置keepAlive,并不需要刷新数据。
beforeRouteLeave (to, from, next) { if(to.name=="MatchDetail" || to.name=="MatchDetail2"){ to.meta.keepAlive = true; to.meta.isrefersh=false; } next() }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容