[发明专利]一种基于vue的多页签实例缓存方法有效
申请号: | 202111494719.1 | 申请日: | 2021-12-09 |
公开(公告)号: | CN113900628B | 公开(公告)日: | 2022-02-18 |
发明(设计)人: | 孙娉娉;吴锦旭;龙逊敏 | 申请(专利权)人: | 中邮消费金融有限公司 |
主分类号: | G06F8/20 | 分类号: | G06F8/20 |
代理公司: | 广州微斗专利代理有限公司 44390 | 代理人: | 陈文爽 |
地址: | 511458 广东省广州市南沙区海*** | 国省代码: | 广东;44 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 一种 基于 vue 多页签 实例 缓存 方法 | ||
1.一种基于vue的多页签实例缓存方法,其特征在于,包括如下步骤:
S1、在keep-alive的机制上,利用抽象组件包裹路由组件,根据当前路由配置生成一个唯一的key值,用所述key值来标志每一个页签组件实例,使得所述抽象组件根据唯一的key值识别相应的页签组件实例;
S2、所述抽象组件包括用于缓存页签组件实例的cache集合、用于存储不需要缓存的页签组件实例的key值的不缓存页签队列以及用于存储需要缓存的当前页签的key值的缓存页签队列;
S3、初始化一个全局不缓存页签队列,用于存储不需要缓存的页签组件实例的key值,并将所述全局不缓存页签队列与所述抽象组件内的所述不缓存页签队列进行双向绑定;
初始化一个全局缓存页签队列,用于存储需要缓存的当前页签的key值,并将所述全局缓存页签队列与所述抽象组件内的所述缓存页签队列进行双向绑定;
S4、路由发生变化时触发抽象组件的渲染,从而获取当前被渲染的页签组件,进而得到所述页签组件实例的唯一key值;
S5、根据key值,抽象组件控制页签组件重新渲染,或者读取缓存中的页签组件,从而完成页签的打开、页签的切换或者页签的关闭。
2.如权利要求1所述的方法,其特征在于,缓存具体包括:
根据当前路由配置生成一个唯一的key值,将所述key值作为页签的标识,生成的key值做为router-view的key属性,用于标志每一个页签组件实例,从而使得抽象组件能够识别key值标志的页签组件实例;
初始化一个全局不缓存页签队列,存储不需要缓存的页签的key值,并与抽象组件中的不缓存页签队列双向绑定;通过修改vue-router的初始化和addRoute方法,能够自动从路由配置中筛选出不需要缓存的路由,维护到全局的不缓存页签队列,从而动态的更新所有不需要缓存的页签组件实例;
初始化一个全局缓存页签队列,存储当前需要缓存的页签的key值,并与抽象组件中的缓存页签队列双向绑定;当更改全局缓存页签队列,就会触发所述抽象组件的缓存监听器,使得cache集合做出相应的修改。
3.如权利要求1所述的方法,其特征在于,抽象组件的渲染具体包括:
首先,抽象组件通过$slots.default获取当前被激活的页面组件实例;
然后,利用router-view的key属性,从而获取该页面组件实例的key值,根据这个页签组件实例标志的唯一key值,从而判断当前激活的页签组件实例的key值是否在不缓存页签队列中,若在所述不缓存页签队列中,则不需要缓存,直接返回当前组件并渲染;
若key值不在所述不缓存页签队列中,则需要缓存,继续判断所述key值是否在cache集合中,若在cache集合中,则返回cache集合中保存的页签组件,从而完成渲染;
若不在cache集合中,则将key和组件实例存入cache集合,并更新缓存页标签队列,然后,返回当前组件,设置keepalive标志并渲染。
4.如权利要求2所述的方法,其特征在于,自定义缓存包括:
根据不同的业务需求,对应设置相应的key值生成方式,通过对全局缓存页签队列的修改,从而动态的管理页签组件实例维度上的缓存的新增,修改和删除。
5.如权利要求3所述的方法,其特征在于,打开页签包括:
用户操作打开页签时,路由发生更新,从而触发抽象组件的渲染,抽象组件根据key值和全局不缓存页签队列,自动更新相应的cache集合中的对象和缓存页签队列,从而完成页签的打开。
6.如权利要求3所述的方法,其特征在于,切换页签包括:
用户操作切换页签时,路由发生更新,从而触发抽象组件的渲染,抽象组件根据key值和全局不缓存页签队列,自动更新相应的cache集合中的对象和缓存页签队列,从而完成页签的切换。
7.如权利要求5或6所述的方法,其特征在于,关闭页签包括:
路由发生更新,获取key值,判断key值是否在全局不缓存队列中;
若key值在所述全局不缓存页签队列中,则直接关闭当前页签,关闭当前页签后去往上一个页签,若上一个页签不存在,则去往首页,从而触发打开页签或者切换页签的操作;
若key值不在所述全局不缓存页签队列中,则更新所述全局缓存页签队列,全局缓存页签队列变化从而触发所述抽象组件的缓存监听器,缓存监听器获取cache集合的所有对象,进而判断cache集合中的对象的key值是否在全局缓存页签队列中,若cache集合中对象的key值不在全局缓存页签队列中,则调用缓存组件的$destroy()方法,并去除cache集合中该组件,同时,关闭当前页签后去往上一个页签,若上一个页签不存在,则去往首页,从而触发打开页签或者切换页签的操作。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于中邮消费金融有限公司,未经中邮消费金融有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/202111494719.1/1.html,转载请声明来源钻瓜专利网。