189 8069 5689

keepAlive的使用方法-创新互联

keepalive,是在TCP中一个可以检测死连接的机制。

创新互联建站主营昌邑网站建设的网络公司,主营网站建设方案,App定制开发,昌邑h5微信小程序开发搭建,昌邑网站营销推广欢迎昌邑等地区企业咨询

keepalive原理很简单,TCP会在空闲了一定时间后发送数据给对方:

1.如果主机可达,对方就会响应ACK应答,就认为是存活的。

2.如果可达,但应用程序退出,对方就发FIN应答,发送TCP撤消连接。

3.如果可达,但应用程序崩溃,对方就发RST消息。

4.如果对方主机不响应ack, rst,继续发送直到超时,就撤消连接。这个时间就是默认的二个小时。

用vue做后台管理项目,特别是有列表页、列表数据详情页、列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,有时候需要保存组件状态,
要求 :

1.列表页进入详情页返回列表页时列表不能刷新,连页数、筛选条件等都不能变

2.列表页进列表数据编辑页若数据有改动返回列表页列表数据得刷新,但页数、筛选条件等都不能变

3.非详情页、编辑页进入列表页时列表数据得刷新,页数、筛选条件等都全部重置

总结一下就是‘这个列表页我想让它刷新,他就得刷新,不想让他刷,他就无变化

那么是啥呢?对,是keep-alive组件,对,是它。

但单纯的keep-alive是前进后退都不会刷新的,所以需要改造一下,让它乖乖听话。这个过程需要路由路由参数meta配合我们。

1.在路由文件中为目标列表页设置meta参数,里面包含keepAlive和ifDoFresh字段

复制代码
{
path:'*',
name:'datalists',
component: resolve => require(['@/view/datalist'], resolve),
meta:{
keepAlive: true,
ifDoFresh:false
}
},

复制代码

2.在程序主入口main.vue中设置页面根据keepAlive字段判断是否使用keep-alive组件。

复制代码






复制代码
3.在目标列表页的beforeRouteEnter方法中判断页面进入方式(详情页,编辑页或其他方式),根据需求将路由参数的ifDoFresh字段设为true/false,

在页面的activated(开启了 keepAlive: true的页面在第二次进入时是无法触发mounted发法的)方法中根据ifDoFresh字段判断是否刷新页面。

复制代码
beforeRouteEnter (to, from, next) {
if(from.name!='详情页'&&from.name!='编辑页')
{
to.meta.ifDoFresh = true;
}
next();
},
activated(){
//开启了keepAlive:true后再次进入,以前的搜索条件和页数都不会变,无论什么情况都调用一下获取数据的接口,这样就能得到当前搜索条件和页数的最新数据
if(this.$route.meta.ifDoFresh){
//重置ifDoFresh
this.$route.meta.ifDoFresh = false;
 //获取列表数据方法第一参数为是否重置搜索条件和页数
this.getData(true);
}else{
this.getData();
}
}
完结!

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页名称:keepAlive的使用方法-创新互联
标题网址:http://cdxtjz.cn/article/hojsi.html

其他资讯