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"
而且 不要动态修改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()
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图,以下是一个简单的步骤和示例代码来实现这个功能,需要的朋友可以参考下2023-10-10
今天小编就为大家分享一篇vue 根据选择条件显示指定参数的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最近工作中遇到一个需求，是要做一个页面放张大表格用来显示数据项，纯粹为了view层操作方便，就用了vue做渲染。然而又被提出了一个需求，需要相邻的相同值的行数据项进行单元格合并，这就醉了。没办法，只能想办法解决，下面通过这篇文章来一起看看吧。2016-11-11
今天小编就为大家分享一篇vue操作下拉选择器获取选择的数据的id方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
前端框架学习总结之Angular、React与Vue的比较详解
这篇文章主要跟大家分享了关于前端框架中Angular.js、React.js与Vue.js的全方位比较，文章介绍的非常详细，对大家进行区分对比这三者之间的差异区别很有帮助，需要的朋友可以参考借鉴，下面来一起看看吧。2017-03-03
Javascript vue.js表格分页，ajax异步加载数据
这篇文章主要介绍了Javascript vue.js表格分页，ajax异步加载数据的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了Vue.use的原理和设计源码探究详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
vue3中使用vuedraggable实现拖拽el-tree数据分组功能
这篇文章主要介绍了vue3中使用vuedraggable实现拖拽el-tree数据分组功能,可以实现单个拖拽、双击添加、按住ctrl键实现多个添加,或者按住shift键实现范围添加,添加到框中的数据,还能拖拽排序,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了vue实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue3中defineEmits、defineProps 不用引入便直接用
这篇文章主要介绍了Vue3中defineEmits、defineProps 不用引入便直接用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
最新评论