本发明专利技术涉及页面缓存技术领域，提供一种基于vue3的页面缓存方法和系统及设备，包括：构建缓存策略配置对应的JavaScript对象，根据JavaScript对象创建缓存策略项；采用缓存策略项更新全局缓存空间的组件缓存组KeepAliveList，将对应的页面缓存策略实时同步至页面；通过动态注册和卸载缓存策略项的键值修改缓存策略，通过消息数据的传递进行页面间通信。本发明专利技术的基于vue3的页面缓存方法和系统及设备，可以利用vue3提供的组合式API能力，让调用方通过配置缓存策略，实现特定页面缓存的能力，通过registToRoute和unRegistToRoute方法动态注册和卸载缓存策略项，使调用者能灵活地改变缓存策略，通过sendMessage和activated方法使用户可以进行页面间的通信。
1、vue.js是一种用于构建用户界面的javascript框架，在使用vue构建业务系统时，当用户在某个审批页面选择一些筛选条件搜索到相应的审批记录，用户点击某一条审批记录跳转到审批详情页查看了这条记录的详细信息，然后用户想返回审批界面继续查看之前的搜索结果，因此返回到审批界面后需要继续保持之前的页面状态，但vue页面间跳转是会刷新的，即之前的页面的状态会被全部重置。
2、目前，主要通过以下方式进行应对，第一种方式：不使用页面跳转，将审批页和审批详情页放在同一个页面，通过条件来控制显示隐藏，让用户感觉切换了页面，可以很好的保留页面的状态。在实际应用中，该方式存在以下不足：1.由于将两个页面的内容放在一起，不利于代码整体的维护，同时也会增加页面的资源大小，造成资源响应时间变慢；2.不利与页面的权限控制，通常业务系统会根据页面的访问地址做权限控制，由于两个页面合为一个，所以需要单独做处理，当项目复杂度提高后，可维护性会大大降低。第二种方式是通过vue提供的<keep-alive>组件，达到缓存页面状态的目的。该方式在实际应用中，当页面被缓存后，会一直处于缓存状态，当用户在申请页面提交了一个申请，来到审批页时，由于审批页处于缓存状态，这条提交记录在审批页会查看不到。
>1、有鉴于此，为了克服现有技术的不足，本专利技术旨在提供一种基于vue3的页面缓存方法和系统及设备。2、根据本专利技术的第一方面，提供一种基于vue3的页面缓存方法，该方法包括：
3、构建缓存策略配置对应的javascript对象，根据javascript对象创建缓存策略项；
4、采用缓存策略项更新全局缓存空间的组件缓存组keepalivelist，将对应的页面缓存策略实时同步至页面；
5、通过动态注册和卸载缓存策略项的键值修改缓存策略，通过消息数据的传递进行页面间通信。
6、优选地，本专利技术的基于vue3的页面缓存方法中，构建缓存策略配置对应的javascript对象，根据javascript对象创建缓存策略项，包括：构建缓存策略配置对应的javascript对象，将需要被缓存页面的路由名称作为javascript对象的键，将目标页面的路由名称集合作为javascript对象的值，将javascript对象的键值对作为缓存策略项。
7、优选地，本专利技术的基于vue3的页面缓存方法中，当跳转至目标页面时需要缓存当前页面的路由名称。
8、优选地，本专利技术的基于vue3的页面缓存方法中，采用缓存策略项更新全局缓存空间的组件缓存组keepalivelist，将对应的页面缓存策略实时同步至页面，包括：
9、采用缓存策略项初始化全局缓存空间的组件缓存组keepalivelist；
10、在页面跳转前，采用缓存策略项对跳转的目标页面的路由名称进行校验，根据校验结果更新经过初始化的组件缓存组keepalivelist；
11、通过将更新的组件缓存组keepalivelist绑定在vue3的keep-alive组件的include属性上，将更新的组件缓存组keepalivelist对应的页面缓存策略实时同步至页面。
12、优选地，本专利技术的基于vue3的页面缓存方法中，采用缓存策略项初始化全局缓存空间的组件缓存组keepalivelist，包括：通过将缓存策略项中需要被缓存页面的路由名称插入组件缓存组keepalivelist，初始化全局缓存空间的组件缓存组keepalivelist。
13、优选地，本专利技术的基于vue3的页面缓存方法中，采用缓存策略项对跳转的目标页面的路由名称进行校验，根据校验结果更新经过初始化的组件缓存组keepalivelist，包括：
14、当跳转的目标页面的路由名称与缓存策略项中需要被缓存页面的路由名称相同，向经过初始化的组件缓存组keepalivelist中添加需要被缓存页面的路由名称并进行去重；
15、当跳转的目标页面的路由名称与缓存策略项中需要被缓存页面的路由名称不同，且所述跳转的目标页面的路由名称不在缓存策略项的目标页面的路由名称集合中，将对应的需要被缓存页面的路由名称从经过初始化的组件缓存组keepalivelist中删除。
16、优选地，本专利技术的基于vue3的页面缓存方法中，通过动态注册和卸载缓存策略项的键值修改缓存策略，包括：
17、通过registtoroute方法动态注册存策略项中目标页面的路由名称集合，动态注册缓存策略；
18、通过unregisttoroute方法动态卸载缓存策略项中目标页面的路由名称集合，动态卸载缓存策略。
19、优选地，本专利技术的基于vue3的页面缓存方法中，通过消息数据的传递进行页面间通信，包括：通过sendmessage方法和activated方法进行页面间的消息传递。
20、根据本专利技术的第二方面，提供一种基于vue3的页面缓存系统，该系统包括页面缓存服务端，该页面缓存服务端用于：构建缓存策略配置对应的javascript对象，根据javascript对象创建缓存策略项；采用缓存策略项更新全局缓存空间的组件缓存组keepalivelist，将对应的页面缓存策略实时同步至页面；通过动态注册和卸载缓存策略项的键值修改缓存策略，通过消息数据的传递进行页面间通信。
21、根据本专利技术的第三方面，提供一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现本专利技术第一方面所述的方法。
22、本专利技术的基于vue3的页面缓存方法和系统及设备，具有以下有益技术效果：
23、1.利用vue3提供的组合式api能力，让调用方通过配置缓存策略，实现特定页面缓存的能力，通过registtoroute和unregisttoroute方法动态注册和卸载缓存策略项，使调用者能灵活地改变缓存策略，通过sendmessage和activated方法使用户可以进行页面间的通信。
24、2.开发者通过简单的配置，就可以控制路由在不同页面间切换时是否缓存的状态，并且提供了消息通知的机制，让开发者可以根据不同的业务场景，在缓存路由被重新激活时通过消息来进行特定业务处理，对于用户来说，该方法极大的提高了用户使用系统时的流畅度和便利性。
本文档来自技高网...
【技术保护点】
1.一种基于vue3的页面缓存方法，其特征在于，所述方法包括：
2.根据权利要求1所述的基于vue3的页面缓存方法，其特征在于，构建缓存策略配置对应的JavaScript对象，根据JavaScript对象创建缓存策略项，包括：构建缓存策略配置对应的JavaScript对象，将需要被缓存页面的路由名称作为JavaScript对象的键，将目标页面的路由名称集合作为JavaScript对象的值，将JavaScript对象的键值对作为缓存策略项。
3.根据权利要求2所述的基于vue3的页面缓存方法，其特征在于，当跳转至目标页面时需要缓存当前页面的路由名称。
4.根据权利要求1所述的基于vue3的页面缓存方法，其特征在于，采用缓存策略项更新全局缓存空间的组件缓存组KeepAliveList，将对应的页面缓存策略实时同步至页面，包括：
5.根据权利要求4所述的基于vue3的页面缓存方法，其特征在于，采用缓存策略项初始化全局缓存空间的组件缓存组KeepAliveList，包括：通过将缓存策略项中需要被缓存页面的路由名称插入组件缓存组KeepAliveList，初始化全局缓存空间的组件缓存组KeepAliveList。
6.根据权利要求1所述的基于vue3的页面缓存方法，其特征在于，采用缓存策略项对跳转的目标页面的路由名称进行校验，根据校验结果更新经过初始化的组件缓存组KeepAliveList，包括：
7.根据权利要求1所述的基于vue3的页面缓存方法，其特征在于，通过动态注册和卸载缓存策略项的键值修改缓存策略，包括：
8.根据权利要求1所述的基于vue3的页面缓存方法，其特征在于，通过消息数据的传递进行页面间通信，包括：通过sendMessage方法和activated方法进行页面间的消息传递。
9.一种基于vue3的页面缓存系统，其特征在于，所述系统包括页面缓存服务端，所述页面缓存服务端用于：构建缓存策略配置对应的JavaScript对象，根据JavaScript对象创建缓存策略项；采用缓存策略项更新全局缓存空间的组件缓存组KeepAliveList，将对应的页面缓存策略实时同步至页面；通过动态注册和卸载缓存策略项的键值修改缓存策略，通过消息数据的传递进行页面间通信。
10.一种计算机设备，其特征在于，所述计算机设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1-8中任一项所述方法的步骤。
...
【技术特征摘要】
1.一种基于vue3的页面缓存方法，其特征在于，所述方法包括：
2.根据权利要求1所述的基于vue3的页面缓存方法，其特征在于，构建缓存策略配置对应的javascript对象，根据javascript对象创建缓存策略项，包括：构建缓存策略配置对应的javascript对象，将需要被缓存页面的路由名称作为javascript对象的键，将目标页面的路由名称集合作为javascript对象的值，将javascript对象的键值对作为缓存策略项。
3.根据权利要求2所述的基于vue3的页面缓存方法，其特征在于，当跳转至目标页面时需要缓存当前页面的路由名称。
4.根据权利要求1所述的基于vue3的页面缓存方法，其特征在于，采用缓存策略项更新全局缓存空间的组件缓存组keepalivelist，将对应的页面缓存策略实时同步至页面，包括：
5.根据权利要求4所述的基于vue3的页面缓存方法，其特征在于，采用缓存策略项初始化全局缓存空间的组件缓存组keepalivelist，包括：通过将缓存策略项中需要被缓存页面的路由名称插入组件缓存组keepalivelist，初始化全局缓存空间的组件缓存组keepalivelist。
6.根据权利要...
【专利技术属性】
技术研发人员：齐磊，
申请(专利权)人：中电云计算技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。