一种页面切换方法、装置、设备及介质与流程

1.本技术涉及资源调度技术领域，尤其涉及网页应用领域，具体涉及一种页面切换方法、装置、设备及介质。


背景技术：

2.在网页(web)应用领域，用户经常会在多个页面之间来回切换，keep-alive(保持状态)是vue内置的一个组件，当用户在一个系统内部切换页面时，可以通过keep-alive保持页面状态，例如从a页面切换到b页面，再从b页面切换回a页面时，仍然保留a页面的数据。
3.然而在基于微前端的资源管理系统中，将web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，每个前端应用就是一个子系统，会存在两个子系统的页面之间互相跳转的业务需求。由于不同子系统的vue实例不同，keep-alive无法在跨系统的页面切换时保持页面状态。


技术实现要素：

4.本技术实施例提供一种页面切换方法、装置、设备及介质，用于解决如何在跨系统的页面切换时保持页面状态的问题。
5.第一方面，本技术提供一种页面切换方法，所述方法应用于基于微前端的资源管理系统中，所述资源管理系统包括第一子系统和第二子系统，所述第一子系统和所述第二子系统对应不同的前端应用，所述方法包括：
6.响应于在所述第一子系统的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子系统的第二页面；其中，所述第一访问操作用于访问所述第二页面；
7.加载预先缓存的所述第二子系统的vue实例，显示所述第二子系统的vue实例中的所述第二页面的页面数据。
8.在本技术实施例中，资源管理系统的第一子系统和第二子系统对应不同的前端应用，通过预先缓存第二子系统的vue实例，在从第一子系统的第一页面切换回第二子系统的第二页面时，可以加载预先缓存好的第二子系统的vue实例，进而显示第二子系统的vue实例中的第二页面的页面数据，从而在跨系统的页面切换时保持页面状态，不同从零渲染第二页面，尽快显示第二页面的页面数据，提升用户体验。
9.在一种可能的实施例中，在响应于在所述第一子系统的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子系统的第二页面之前，所述方法还包括：
10.响应于在所述第二页面进行的第二访问操作，保存所述第二子系统的vue实例，从所述第二页面切换至所述第一页面；其中，所述第二访问操作用于访问所述第一页面。
11.在本技术实施例中，在离开第二页面之前，保存第二子系统的vue实例，以便后续切换回第二页面时，可以直接加载第二子系统的vue实例，以尽快恢复第二子系统的第二页面。
12.在一种可能的实施例中，在响应于在所述第二页面进行的第二访问操作，保存所
述第二子系统的vue实例之前，所述方法还包括：
13.响应于在所述第二页面进行的输入操作，获取用户操作数据；
14.将所述用户操作数据写入所述第二子系统的vue实例中。
15.在本技术实施例中，将用户在第二页面的操作数据写入第二子系统的vue实例中，以便后续切换回第二页面时，可以保留用户已经输入的数据，避免用户重复输入，提升用户体验。
16.在一种可能的实施例中，在从所述第一页面切换至所述第二子系统的第二页面之前，所述方法还包括：
17.若不存在预先缓存的所述第一子系统的vue实例，则保存所述第一子系统当前的vue实例；或者，
18.若存在预先缓存的所述第一子系统的vue实例，则删除预先缓存的所述第一子系统的vue实例，保存所述第一子系统当前的vue实例。
19.在本技术实施例中，在离开第一页面之前，保存第一子系统当前的vue实例，或者，删除预先缓存的第一子系统的vue实例，保存第一子系统当前的vue实例，以便后续切换回第一页面时，可以直接加载第一子系统的vue实例，尽快恢复第一页面的页面数据。
20.第二方面，本技术提供一种页面切换装置，所述装置设置于基于微前端的资源管理系统中，所述资源管理系统包括第一子系统和第二子系统，所述第一子系统和所述第二子系统对应不同的前端应用，所述装置包括：
21.切换单元，用于响应于在所述第一子系统的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子系统的第二页面；其中，所述第一访问操作用于访问所述第二页面；
22.加载显示单元，用于加载预先缓存的所述第二子系统的vue实例，显示所述第二子系统的vue实例中的所述第二页面的页面数据。
23.在一种可能的实施例中，所述装置还包括保存模块；
24.所述保存模块用于在响应于在所述第一子系统的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子系统的第二页面之前，响应于在所述第二页面进行的第二访问操作，保存所述第二子系统的vue实例；其中，所述第二访问操作用于访问所述第一页面；
25.所述切换模块还用于从所述第二页面切换至所述第一页面。
26.在一种可能的实施例中，所述装置还包括写入模块，所述写入模块用于：
27.在响应于在所述第二页面进行的第二访问操作，保存所述第二子系统的vue实例之前，响应于在所述第二页面进行的输入操作，获取用户操作数据；
28.将所述用户操作数据写入所述第二子系统的vue实例中。
29.在一种可能的实施例中，所述保存模块还用于：
30.在从所述第一页面切换至所述第二子系统的第二页面之前，若不存在预先缓存的所述第一子系统的vue实例，则保存所述第一子系统当前的vue实例；或者，
31.若存在预先缓存的所述第一子系统的vue实例，则删除预先缓存的所述第一子系统的vue实例，保存所述第一子系统当前的vue实例。
32.第三方面，本技术提供一种电子设备，包括：
33.存储器，用于存储程序指令；
34.处理器，用于调用所述存储器中存储的程序指令，按照获得的程序指令执行第一方面中任一项所述的方法包括的步骤。
35.第四方面，本技术提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被计算机执行时，使所述计算机执行第一方面中任一项所述的方法。
36.第五方面，本技术提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行第一方面中任一项所述的方法。
附图说明
37.图1为本技术实施例提供的一种基于微前端的资源管理系统的结构示意图；
38.图2为本技术实施例提供的一种页面切换方法的流程图；
39.图3为本技术实施例提供的一种页面切换装置的结构图；
40.图4为本技术实施例提供的一种电子设备的结构图。
具体实施方式
41.为使本技术的目的、技术方案和优点更加清楚明白，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互任意组合。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以按不同于此处的顺序执行所示出或描述的步骤。
42.本技术的说明书和权利要求书及上述附图中的术语“第一”和“第二”是用于区别不同对象，而非用于描述特定顺序。此外，术语“包括”以及它们任何变形，意图在于覆盖不排他的保护。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本技术中的“多个”可以表示至少两个，例如可以是两个、三个或者更多个，本技术实施例不做限制。
43.在介绍本技术实施例所提供的页面切换方法之前，为了便于理解，首先对下面对本技术实施例的技术背景进行详细介绍。
44.随着业务越来越多，为了方便管理，许多项目被设计成微前端的架构。微前端是一种类似于微服务的思想，将后端微服务的理念应用于浏览器端，根据业务逻辑将单个web应用分解成多个更小、更简单、互不相关的前端应用，每个前端应用就是一个能够独立运行、独立开发、独立部署的子系统，极大地提高了开发效率，但在用户看来这仍然是内聚的单个应用。用户经常需要在多个子系统的页面之间相互切换，例如，用户在某子系统的a页面中填写表单时，填写了部分表单项的数据后，需要离开当前页面到另一个子系统的b页面查询后，再返回a页面继续填写，但是用户切换回a页面时，会发现之前填写的数据消失了，需要
重现填写，导致用户体验较差。
45.现有技术中当页面切换时，keep-alive会缓存包裹在其中的页面的状态，下次重新进入被包裹的页面时不会重新渲染该页面，而是从缓存中读取该页面的页面数据进行显示。然而keep-alive是vue内置的一个组件，只能在属于同一个vue的情况下切换页面时保持页面状态，不同子系统的vue实例不同，keep-alive无法在跨系统的页面切换时保持页面状态。
46.鉴于此，本技术实施例提供一种页面切换方法。该方法可以由页面切换设备执行，页面切换设备可以通过终端或服务器实现，终端例如个人计算机、手机等，服务器例如实体服务或虚拟服务器等。
47.在本技术实施例中，页面切换设备首先可以在浏览器基于前端路由分发实现微前端框架，构建一个基于微前端的资源管理系统。请参照图1，为本技术实施例提供的基于微前端的资源管理系统的结构示意图，该资源管理系统100包括第一子系统110和第二子系统120。第一子系统110和第二子系统120分别对应不同的前端应用。例如web应用被拆分为2个前端应用，2个前端应用包括包销售管理、产品管理，第一子系统110对应销售管理应用，第二子系统120对应产品管理应用。
48.应当说明的是，图1是以资源管理系统包括一个第一子系统110和一个第二子系统120为例，实际上不限制子系统的数量，子系统的数量等于前端应用的数量，每个子系统对应一个前端应用。
49.本技术实施例中，基于微前端的资源管理系统实现了各个子系统的完全解耦，该资源管理系统后期的可维护性和可扩展性得到了增加，可以对该多系统进行增量更新，例如仅更新其中的第一子系统或者仅更新其中的第二子系统，还可以在不修改代码的前提下，通过简单的配置实现新子系统的快速集成，此外，该系统的编译构建时间也的得到了下降。
50.下面结合图1所示的基于微前端的资源管理系统，以页面切换设备在该资源管理系统中执行页面切换方法为例进行介绍。请参照图2，为本技术实施例提供的一种页面切换方法的流程图。
51.s210、响应于在第一子系统的第一页面进行的第一访问操作，从第一页面切换至第二子系统的第二页面。
52.页面切换设备的当前显示页面为第一子系统的第一页面，页面切换设备可以从资源管理系统的首页切换到第一子系统的第一页面。例如，用户输入账号和密码，可以登录基于微前端的资源管理系统，进入该资源管理系统的首页，该首页显示有该用户权限下的子系统列表，子系统列表包括第一子系统和第二子系统，第一子系统例如销售管理子系统，第二子系统例如产品管理子系统。若用户想要访问第一子系统，则点击第一子系统的图标，页面会根据路由导航到第一子系统。
53.页面切换设备也可以从第一子系统的其他页面切换到第一子系统的第一页面，其他页面为第一子系统的多个页面中除了第一页面之外的页面。页面切换设备也可以从第二子系统的第二页面切换到第一子系统的第一页面。页面切换设备也可以从其他子系统的页面切换到第一子系统的第一页面，其他子系统为资源管理系统中除了第一子系统和第二子系统之外的子系统。
54.在一种可能的实施例中，考虑到后续可能会切换回第一页面，为了避免第一页面的页面数据丢失，页面切换设备可以响应于在第一子系统的第一页面进行的第一访问操作，保存第一子系统的vue实例之后，再从第一页面切换至第二子系统的第二页面。
55.其中，第一访问操作用于访问第二子系统的第二页面，第一访问操作例如单击操作、双击操作等，例如用户想要访问第二子系统，在第一页面上点击了第二子系统的图标。vue是一个轻量级框架，每个子系统对应都有一个vue实例，每个vue实例用于存放对应子系统的数据。第一子系统的vue实例包括第一子系统涉及的所有页面的页面数据和用户操作数据，页面数据为页面默认显示的数据，用户操作数据为用户输入的数据。应当说明的是，若用户没有在第一子系统的任何页面进行过输入操作，则第一子系统的vue实例不包括用户操作数据。
56.页面切换设备根据是否缓存过第一子系统的vue实例，处理情况不同，下面分别进行介绍。
57.第一种情况，不存在预先缓存的第一子系统的vue实例。
58.若页面切换设备首次切换到第一子系统，则页面切换设备中不存在预先缓存的第一子系统的vue实例，直接保存第一子系统当前的vue实例。
59.第二种情况，存在预先缓存的第一子系统的vue实例。
60.若页面切换设备之前进入过第一子系统，则页面切换设备中应当会存在预先缓存第一子系统当时的vue实例，但是页面切换设备本次进入第一子系统的第一页面之后，用户可能在第一页面进行了输入操作，导致第一子系统的vue实例变化。因此，本技术实施例中，若存在预先缓存的第一子系统的vue实例，则对预先缓存的第一子系统的vue实例进行更新，具体可以删除预先缓存的第一子系统的vue实例，保存第一子系统当前的vue实例。
61.考虑到用户这次可能是错误点进了第一子系统，未在第一页面进行任何输入操作就退出第一子系统，此时第一子系统当前的vue实例与预先缓存的第一子系统的vue实例是相同的，若对预先缓存的第一子系统的vue实例进行更新，会导致切换页面的效率降低。因此，在一种可能的实施例中，页面切换设备可以检测用户是否在第一子系统的第一页面进行过输入操作，若确定用户在第一页面未进行任何的输入操作，则不对预先缓存的第一子系统的vue实例进行更新。若确定用户在第一页面进行过输入操作，则对预先缓存的第一子系统的vue实例进行更新。
62.在一种可能的实施例中，页面切换设备响应于在第一子系统的第一页面进行的第一访问操作，也可以不保存第一子系统的vue实例，直接从第一页面切换至第二子系统的第二页面。例如用户确定后续不会再切换回第一子系统。
63.s220、加载预先缓存的第二子系统的vue实例，显示第二子系统的vue实例中的第二页面的页面数据。
64.从第一页面切换至第二页面之后，由于第一页面和第二页面属于不同的子系统，因此不同涉及到跨系统的页面切换。本技术实施例中，页面切换设备可以加载预先缓存的第二子系统的vue实例，显示第二子系统的vue实例中的第二页面的页面数据。
65.应当说明的是，加载vue实例实际上就是将vue实例转化为网页的超级文本标记语言(hypertextmarkup language，html)节点，html节点是构成网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。例如：html标签、属性、文本、注释、整个文档等
都是一个节点。
66.例如，首先进入第一子系统，页面切换设备可以通过fetch方法请求获取第一子系统的静态资源，fetch是web提供的一个可以获取异步资源的接口，静态资源具体例如html节点，将该静态资源挂载到对应挂载节点上，从而显示第一子系统的第一页面。从第一子系统的页面切换至第二子系统的页面时，可以在挂载节点上删除第一子系统的所有html节点，以卸载第一子系统，并重新加载第二子系统的所有html节点。这样能够避免两个子系统的js(javascript)产生干扰，以及两个子系统的级联样式表(cascading style sheets，css)产生干扰。
67.其中涉及到如何获取第二子系统的vue实例，第二子系统的vue实例可以是上一次离开第二子系统时保存的，下面进行具体介绍。
68.页面切换设备响应于在第二子系统的第二页面进行的第二访问操作，保存第二子系统的vue实例，从第二页面切换至第一页面。其中，第二访问操作用于访问第一页面。第二访问操作例如单击操作、双击操作等，例如用户在第二页面上点击了第一子系统的图标。第二子系统的vue实例可以保存页面切换设备的本地，例如浏览器的my widows文件夹中。第二子系统的vue实例包括第二子系统涉及的所有页面的页面数据，页面数据的含义请参照前文论述的内容，此处不再赘述。
69.若用户在第二子系统的某个页面进行过输入操作，则第二子系统的vue实例还包括该页面的用户操作数据，用户操作数据的含义请参照前文论述的内容，此处不再赘述。具体的，页面切换设备响应于在第二子系统的第二页面进行的输入操作，获取用户操作数据，将用户操作数据写入第二子系统的vue实例中。例如用户在第二页面的表格中填入了某些数据，此时将用户填写的数据写入第二子系统的vue实例。
70.在一种可能的实施例中，页面切换设备在同一个子系统内部进行页面切换时，加载并显示keep-alive中缓存的数据，从而实现页面状态的保持。keep-alive中缓存的数据包括页面数据和用户操作数据，页面数据和用户操作数据的含义请参照前文论述的页面数据和用户操作数据的内容，此处不再赘述。
71.例如，页面切换设备响应于在第一子系统的第一页面进行的第三访问用户操作，第三访问用户操作用于访问第一子系统的第三页面，从第一页面切换至第三页面时，加载并显示第一子系统的keep-alive中缓存的第三页面的数据。其中，第三访问用户操作请参照前文论述的第一访问用户操作的内容，此处不再赘述。
72.或者例如，页面切换设备响应于在第二子系统的第二页面进行的第四访问用户操作，第四访问用户操作用于访问第二子系统的第四页面，从第二页面切换至第四页面时，加载并显示第二子系统的keep-alive中缓存的第四页面的数据。其中，第四访问用户操作请参照前文论述的第一访问用户操作的内容，此处不再赘述。
73.为了更加清楚地说明跨系统的页面切换方法，下面进行示例介绍。
74.页面切换设备首次加载第二子系统时，无命中缓存，即不存在预先缓存的第二子系统的vue实例，从零开始渲染第二子系统的vue实例，如果在第二子系统内部切换页面，通过keep-alive实现vue单页面缓存机制，即加载并显示第二子系统的keep-alive中缓存的页面数据。如果从第二子系统的页面切换到第一子系统的页面，在卸载第二子系统之前，保存第二子系统的vue实例，再切换到第一子系统的页面。后续再从第一子系统的页面切换回
第二子系统的页面时，资源管理系统中的缓存调度模块会命中预先缓存的第一子系统的vue实例，此时不会从零渲染第一子系统的页面，而是直接加载第一子系统的vue实例，这样就保证了用户在第一子系统的页面输入的用户操作数据没有丢失，从而提升用户体验。
75.基于同一发明构思，本技术实施例提供一种页面切换装置，该装置设置于前文论述的页面切换设备中，具体设置于页面切换设备构建的基于微前端的资源管理系统中，该资源管理系统包括第一子系统和第二子系统，第一子系统和第二子系统对应不同的前端应用，请参照图3，该装置包括：
76.切换单元301，用于响应于在第一子系统的第一页面进行的第一访问用户操作，从第一页面切换至第二子系统的第二页面；其中，第一访问用户操作用于访问第二页面；
77.加载显示单元302，用于加载预先缓存的第二子系统的vue实例，显示第二子系统的vue实例中的第二页面的页面数据。
78.在一种可能的实施例中，该装置还包括保存模块303；
79.保存模块303用于在响应于在第一子系统的第一页面进行的第一访问用户操作，从第一页面切换至第二子系统的第二页面之前，响应于在第二页面进行的第二访问用户操作，保存第二子系统的vue实例；其中，第二访问用户操作用于访问第一页面；
80.切换模块还用于从第二页面切换至第一页面。
81.在一种可能的实施例中，该装置还包括写入模块304，写入模块304用于：
82.在响应于在第二页面进行的第二访问用户操作，保存第二子系统的vue实例之前，响应于在第二页面进行的输入用户操作，获取用户操作数据；
83.将用户操作数据写入第二子系统的vue实例中。
84.在一种可能的实施例中，保存模块303还用于：
85.在从第一页面切换至第二子系统的第二页面之前，若不存在预先缓存的第一子系统的vue实例，则保存第一子系统当前的vue实例；或者，
86.若存在预先缓存的第一子系统的vue实例，则删除预先缓存的第一子系统的vue实例，保存第一子系统当前的vue实例。
87.作为一种实施例，图3论述的装置可以实现前文论述任一的页面切换方法，此处不再赘述。
88.基于同一发明构思，本技术实施例提供一种电子设备，该设备可以实现前文论述的页面切换设备的功能，请参照图4，该设备包括处理器401和存储器402，
89.存储器402，用于存储程序指令；
90.处理器401，用于调用所述存储器402中存储的程序指令，按照获得的程序指令执行前文论述任一的页面切换方法包括的步骤。由于上述电子设备解决问题的原理与页面切换方法相似，因此上述电子设备的实施可以参见方法的实施，重复之处不再赘述。
91.处理器401可以是一个中央处理单元(central processing unit，cpu)，或者为数字处理单元、或为图像处理器等中的一种或多种组合。存储器602可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，ram)；存储器402也可以是非易失性存储器(non-volatile memory)，例如只读存储器，快闪存储器(flash memory)，硬盘(hard disk drive，hdd)或固态硬盘(solid-state drive，ssd)、或者存储器402是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存
取的任何其他介质，但不限于此。存储器402可以是上述存储器的组合。
92.作为一种实施例，图4中的处理器401可以实现前文论述任一的页面切换方法，处理器401还可以实现前文图3论述的页面切换装置的功能。
93.基于同一发明构思，本技术实施例提供一种计算机可读存储介质，计算机程序产品包括：计算机程序代码，当计算机程序代码在计算机上运行时，使得计算机执行如前文论述任一的页面切换方法。由于上述计算机可读存储介质解决问题的原理与页面切换方法相似，因此上述计算机可读存储介质的实施可以参见方法的实施，重复之处不再赘述。
94.基于同一发明构思，本技术实施例还提供了一种计算机程序产品，该计算机程序产品包括：计算机程序代码，当该计算机程序代码在计算机上运行时，使得计算机执行如前文论述任一的页面切换方法。由于上述计算机程序产品解决问题的原理与页面切换方法相似，因此上述计算机程序产品的实施可以参见方法的实施，重复之处不再赘述。
95.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
96.本技术是参照根据本技术的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
97.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
98.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列用户操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
99.显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的精神和范围。这样，倘若本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术也意图包含这些改动和变型在内。