[发明专利]一种基于vue的多页签实例缓存方法

说明书

本发明涉及一种基于vue的多页签实例缓存的方法，S1、利用抽象组件包裹路由组件，利用用所述key值来标志每一个页签组件实例；S2、抽象组件包括cache集合、不缓存页签队列、缓存页签队列；S3、初始化一个全局不缓存页签队列以及全局缓存页签队列；S4、路由发生变化时触发抽象组件的渲染，从而获取当前被渲染的页签组件，进而得到所述页签组件实例的唯一key值；S5、根据key值，抽象组件控制页签组件重新渲染，或者读取缓存中的页签组件，从而完成页签的打开、页签的切换或者页签的关闭；从而实现页签组件实例粒度上的多页签缓存方案。

技术领域

本发明涉及多页签网页开发的技术领域，特别涉及一种基于vue的多页签实例缓存方法。

背景技术

目前，在WEB应用领域，越来越多的网站采用单页面应用这种方式。在这种方式下，用户在访问应用页面是不会频繁的去切换浏览页面，它通过多页签的方式来模拟传统多页面的操作模式，动态重写当前的页面来与用户交互，不需要重新加载整个页面，从而避免了传统多页面的重新加载所造成的性能浪费。目前流行的SPA三大框架包括React、Vue、Angular，Vue因学习成本低，易上手，生态体系完善等优点，获得了很多前端开发人员的青睐。再结合一些基于Vue的流行UI框架，即可快速的实现一个Vue的SPA多页签WEB应用。用户经常在多个页签间来回切换及操作，页面需要在被切换的时候保留用户的操作痕迹，在被切换回来的时候展示原有用户的操作；在关闭页签重新打开页面的情况下，需要重新渲染该页面，不保留用户的操作痕迹而被重新渲染。

传统上基于Vue-Router及Vuex实现的多页签缓存方案中，每一个页签对应一个路由。每次切换路由的时候，通过vue提供的keep-alive组件，根据当前的路由去匹配页签的name，从而获取相应的页面缓存或者加载新页面并放入缓存中。而关闭页签的时候，根据路由对应该的页面name去除相应页面缓存。

但是，在实际业务场景中，存在多页签，他们的路由不同但对应的组件却是一样的。例如内容编辑页面/content/1,content/2，keep-alive将不在适用，这个时候关闭/content/1页签，/content/2的页签也会失去缓存，导致该页面在再次激活的时候重新渲染。因此一般后管页面只支持打开一个类型的内容编辑页面。这种Vue原有的插件只能实现页签组件级别上的缓存，并不能够很好的满足我们在页签组件实例粒度上缓存的动态更新。

发明内容

基于此，有必要提供一种基于vue的多页签实例缓存的方法。

本发明实施例提供一种基于vue的多页签实例缓存的方法，包括如下步骤：

S1、在keep-alive的机制上，利用抽象组件包裹路由组件，根据当前路由配置生成一个唯一的key值，用所述key值来标志每一个页签组件实例，使得所述抽象组件根据唯一的key值识别相应的页签组件实例；

S2、所述抽象组件包括用于缓存页签组件实例的cache集合、用于存储不需要缓存的页签组件实例的key值的不缓存页签队列、以及用于存储需要缓存的当前页签的key值的缓存页签队列；

S3、初始化一个全局不缓存页签队列，用于存储不需要缓存的页签组件实例的key值，并将所述全局不缓存页签队列与所述抽象组件内的所述不缓存页签队列进行双向绑定；

初始化一个全局缓存页签队列，用于存储需要缓存的当前页签的key值，并将所述全局缓存页签队列与所述抽象组件内的所述缓存页签队列进行双向绑定；

S4、路由发生变化时触发抽象组件的渲染，从而获取当前被渲染的页签组件，进而得到所述页签组件实例的唯一key值；

S5、根据key值，抽象组件控制页签组件重新渲染，或者读取缓存中的页签组件，从而完成页签的打开、页签的切换或者页签的关闭。

优选地，缓存具体包括：