CN113961298A - 一种页面切换方法、装置、设备及介质 - Google Patents

一种页面切换方法、装置、设备及介质 Download PDF

Info

Publication number
CN113961298A
CN113961298A CN202111361274.XA CN202111361274A CN113961298A CN 113961298 A CN113961298 A CN 113961298A CN 202111361274 A CN202111361274 A CN 202111361274A CN 113961298 A CN113961298 A CN 113961298A
Authority
CN
China
Prior art keywords
page
subsystem
vue
switching
instance
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111361274.XA
Other languages
English (en)
Inventor
王关胜
陈波
张泽峰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Construction Bank Corp
Original Assignee
China Construction Bank Corp
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by China Construction Bank Corp filed Critical China Construction Bank Corp
Priority to CN202111361274.XA priority Critical patent/CN113961298A/zh
Publication of CN113961298A publication Critical patent/CN113961298A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请涉及资源调度技术领域，具体涉及一种页面切换方法、装置、设备及介质，用于解决如何在跨***的页面切换时保持页面状态的问题。该方法应用于基于微前端的资源管理***中，所述资源管理***包括第一子***和第二子***，所述第一子***和所述第二子***对应不同的前端应用，所述方法包括：响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面；其中，所述第一访问操作用于访问所述第二页面；加载预先缓存的所述第二子***的vue实例，显示所述第二子***的vue实例中的所述第二页面的页面数据。

Description

一种页面切换方法、装置、设备及介质
技术领域
本申请涉及资源调度技术领域，尤其涉及网页应用领域，具体涉及一种页面切换方法、装置、设备及介质。
背景技术
在网页(web)应用领域，用户经常会在多个页面之间来回切换，keep-alive(保持状态)是Vue内置的一个组件，当用户在一个***内部切换页面时，可以通过keep-alive保持页面状态，例如从A页面切换到B页面，再从B页面切换回A页面时，仍然保留A页面的数据。
然而在基于微前端的资源管理***中，将web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，每个前端应用就是一个子***，会存在两个子***的页面之间互相跳转的业务需求。由于不同子***的vue实例不同，keep-alive无法在跨***的页面切换时保持页面状态。
发明内容
本申请实施例提供一种页面切换方法、装置、设备及介质，用于解决如何在跨***的页面切换时保持页面状态的问题。
第一方面，本申请提供一种页面切换方法，所述方法应用于基于微前端的资源管理***中，所述资源管理***包括第一子***和第二子***，所述第一子***和所述第二子***对应不同的前端应用，所述方法包括：
响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面；其中，所述第一访问操作用于访问所述第二页面；
加载预先缓存的所述第二子***的vue实例，显示所述第二子***的vue实例中的所述第二页面的页面数据。
在本申请实施例中，资源管理***的第一子***和第二子***对应不同的前端应用，通过预先缓存第二子***的vue实例，在从第一子***的第一页面切换回第二子***的第二页面时，可以加载预先缓存好的第二子***的vue实例，进而显示第二子***的vue实例中的第二页面的页面数据，从而在跨***的页面切换时保持页面状态，不同从零渲染第二页面，尽快显示第二页面的页面数据，提升用户体验。
在一种可能的实施例中，在响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面之前，所述方法还包括：
响应于在所述第二页面进行的第二访问操作，保存所述第二子***的vue实例，从所述第二页面切换至所述第一页面；其中，所述第二访问操作用于访问所述第一页面。
在本申请实施例中，在离开第二页面之前，保存第二子***的vue实例，以便后续切换回第二页面时，可以直接加载第二子***的vue实例，以尽快恢复第二子***的第二页面。
在一种可能的实施例中，在响应于在所述第二页面进行的第二访问操作，保存所述第二子***的vue实例之前，所述方法还包括：
响应于在所述第二页面进行的输入操作，获取用户操作数据；
将所述用户操作数据写入所述第二子***的vue实例中。
在本申请实施例中，将用户在第二页面的操作数据写入第二子***的vue实例中，以便后续切换回第二页面时，可以保留用户已经输入的数据，避免用户重复输入，提升用户体验。
在一种可能的实施例中，在从所述第一页面切换至所述第二子***的第二页面之前，所述方法还包括：
若不存在预先缓存的所述第一子***的vue实例，则保存所述第一子***当前的vue实例；或者，
若存在预先缓存的所述第一子***的vue实例，则删除预先缓存的所述第一子***的vue实例，保存所述第一子***当前的vue实例。
在本申请实施例中，在离开第一页面之前，保存第一子***当前的vue实例，或者，删除预先缓存的第一子***的vue实例，保存第一子***当前的vue实例，以便后续切换回第一页面时，可以直接加载第一子***的vue实例，尽快恢复第一页面的页面数据。
第二方面，本申请提供一种页面切换装置，所述装置设置于基于微前端的资源管理***中，所述资源管理***包括第一子***和第二子***，所述第一子***和所述第二子***对应不同的前端应用，所述装置包括：
切换单元，用于响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面；其中，所述第一访问操作用于访问所述第二页面；
加载显示单元，用于加载预先缓存的所述第二子***的vue实例，显示所述第二子***的vue实例中的所述第二页面的页面数据。
在一种可能的实施例中，所述装置还包括保存模块；
所述保存模块用于在响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面之前，响应于在所述第二页面进行的第二访问操作，保存所述第二子***的vue实例；其中，所述第二访问操作用于访问所述第一页面；
所述切换模块还用于从所述第二页面切换至所述第一页面。
在一种可能的实施例中，所述装置还包括写入模块，所述写入模块用于：
在响应于在所述第二页面进行的第二访问操作，保存所述第二子***的vue实例之前，响应于在所述第二页面进行的输入操作，获取用户操作数据；
将所述用户操作数据写入所述第二子***的vue实例中。
在一种可能的实施例中，所述保存模块还用于：
在从所述第一页面切换至所述第二子***的第二页面之前，若不存在预先缓存的所述第一子***的vue实例，则保存所述第一子***当前的vue实例；或者，
若存在预先缓存的所述第一子***的vue实例，则删除预先缓存的所述第一子***的vue实例，保存所述第一子***当前的vue实例。
第三方面，本申请提供一种电子设备，包括：
存储器，用于存储程序指令；
处理器，用于调用所述存储器中存储的程序指令，按照获得的程序指令执行第一方面中任一项所述的方法包括的步骤。
第四方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被计算机执行时，使所述计算机执行第一方面中任一项所述的方法。
第五方面，本申请提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行第一方面中任一项所述的方法。
附图说明
图1为本申请实施例提供的一种基于微前端的资源管理***的结构示意图；
图2为本申请实施例提供的一种页面切换方法的流程图；
图3为本申请实施例提供的一种页面切换装置的结构图；
图4为本申请实施例提供的一种电子设备的结构图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚明白，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以按不同于此处的顺序执行所示出或描述的步骤。
本申请的说明书和权利要求书及上述附图中的术语“第一”和“第二”是用于区别不同对象，而非用于描述特定顺序。此外，术语“包括”以及它们任何变形，意图在于覆盖不排他的保护。例如包含了一系列步骤或单元的过程、方法、***、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请中的“多个”可以表示至少两个，例如可以是两个、三个或者更多个，本申请实施例不做限制。
在介绍本申请实施例所提供的页面切换方法之前，为了便于理解，首先对下面对本申请实施例的技术背景进行详细介绍。
随着业务越来越多，为了方便管理，许多项目被设计成微前端的架构。微前端是一种类似于微服务的思想，将后端微服务的理念应用于浏览器端，根据业务逻辑将单个web应用分解成多个更小、更简单、互不相关的前端应用，每个前端应用就是一个能够独立运行、独立开发、独立部署的子***，极大地提高了开发效率，但在用户看来这仍然是内聚的单个应用。用户经常需要在多个子***的页面之间相互切换，例如，用户在某子***的A页面中填写表单时，填写了部分表单项的数据后，需要离开当前页面到另一个子***的B页面查询后，再返回A页面继续填写，但是用户切换回A页面时，会发现之前填写的数据消失了，需要重现填写，导致用户体验较差。
现有技术中当页面切换时，keep-alive会缓存包裹在其中的页面的状态，下次重新进入被包裹的页面时不会重新渲染该页面，而是从缓存中读取该页面的页面数据进行显示。然而keep-alive是vue内置的一个组件，只能在属于同一个vue的情况下切换页面时保持页面状态，不同子***的vue实例不同，keep-alive无法在跨***的页面切换时保持页面状态。
鉴于此，本申请实施例提供一种页面切换方法。该方法可以由页面切换设备执行，页面切换设备可以通过终端或服务器实现，终端例如个人计算机、手机等，服务器例如实体服务或虚拟服务器等。
在本申请实施例中，页面切换设备首先可以在浏览器基于前端路由分发实现微前端框架，构建一个基于微前端的资源管理***。请参照图1，为本申请实施例提供的基于微前端的资源管理***的结构示意图，该资源管理***100包括第一子***110和第二子***120。第一子***110和第二子***120分别对应不同的前端应用。例如Web应用被拆分为2个前端应用，2个前端应用包括包销售管理、产品管理，第一子***110对应销售管理应用，第二子***120对应产品管理应用。
应当说明的是，图1是以资源管理***包括一个第一子***110和一个第二子***120为例，实际上不限制子***的数量，子***的数量等于前端应用的数量，每个子***对应一个前端应用。
本申请实施例中，基于微前端的资源管理***实现了各个子***的完全解耦，该资源管理***后期的可维护性和可扩展性得到了增加，可以对该多***进行增量更新，例如仅更新其中的第一子***或者仅更新其中的第二子***，还可以在不修改代码的前提下，通过简单的配置实现新子***的快速集成，此外，该***的编译构建时间也的得到了下降。
下面结合图1所示的基于微前端的资源管理***，以页面切换设备在该资源管理***中执行页面切换方法为例进行介绍。请参照图2，为本申请实施例提供的一种页面切换方法的流程图。
S210、响应于在第一子***的第一页面进行的第一访问操作，从第一页面切换至第二子***的第二页面。
页面切换设备的当前显示页面为第一子***的第一页面，页面切换设备可以从资源管理***的首页切换到第一子***的第一页面。例如，用户输入账号和密码，可以登录基于微前端的资源管理***，进入该资源管理***的首页，该首页显示有该用户权限下的子***列表，子***列表包括第一子***和第二子***，第一子***例如销售管理子***，第二子***例如产品管理子***。若用户想要访问第一子***，则点击第一子***的图标，页面会根据路由导航到第一子***。
页面切换设备也可以从第一子***的其他页面切换到第一子***的第一页面，其他页面为第一子***的多个页面中除了第一页面之外的页面。页面切换设备也可以从第二子***的第二页面切换到第一子***的第一页面。页面切换设备也可以从其他子***的页面切换到第一子***的第一页面，其他子***为资源管理***中除了第一子***和第二子***之外的子***。
在一种可能的实施例中，考虑到后续可能会切换回第一页面，为了避免第一页面的页面数据丢失，页面切换设备可以响应于在第一子***的第一页面进行的第一访问操作，保存第一子***的vue实例之后，再从第一页面切换至第二子***的第二页面。
其中，第一访问操作用于访问第二子***的第二页面，第一访问操作例如单击操作、双击操作等，例如用户想要访问第二子***，在第一页面上点击了第二子***的图标。Vue是一个轻量级框架，每个子***对应都有一个vue实例，每个vue实例用于存放对应子***的数据。第一子***的vue实例包括第一子***涉及的所有页面的页面数据和用户操作数据，页面数据为页面默认显示的数据，用户操作数据为用户输入的数据。应当说明的是，若用户没有在第一子***的任何页面进行过输入操作，则第一子***的vue实例不包括用户操作数据。
页面切换设备根据是否缓存过第一子***的vue实例，处理情况不同，下面分别进行介绍。
第一种情况，不存在预先缓存的第一子***的vue实例。
若页面切换设备首次切换到第一子***，则页面切换设备中不存在预先缓存的第一子***的vue实例，直接保存第一子***当前的vue实例。
第二种情况，存在预先缓存的第一子***的vue实例。
若页面切换设备之前进入过第一子***，则页面切换设备中应当会存在预先缓存第一子***当时的vue实例，但是页面切换设备本次进入第一子***的第一页面之后，用户可能在第一页面进行了输入操作，导致第一子***的vue实例变化。因此，本申请实施例中，若存在预先缓存的第一子***的vue实例，则对预先缓存的第一子***的vue实例进行更新，具体可以删除预先缓存的第一子***的vue实例，保存第一子***当前的vue实例。
考虑到用户这次可能是错误点进了第一子***，未在第一页面进行任何输入操作就退出第一子***，此时第一子***当前的vue实例与预先缓存的第一子***的vue实例是相同的，若对预先缓存的第一子***的vue实例进行更新，会导致切换页面的效率降低。因此，在一种可能的实施例中，页面切换设备可以检测用户是否在第一子***的第一页面进行过输入操作，若确定用户在第一页面未进行任何的输入操作，则不对预先缓存的第一子***的vue实例进行更新。若确定用户在第一页面进行过输入操作，则对预先缓存的第一子***的vue实例进行更新。
在一种可能的实施例中，页面切换设备响应于在第一子***的第一页面进行的第一访问操作，也可以不保存第一子***的vue实例，直接从第一页面切换至第二子***的第二页面。例如用户确定后续不会再切换回第一子***。
S220、加载预先缓存的第二子***的vue实例，显示第二子***的vue实例中的第二页面的页面数据。
从第一页面切换至第二页面之后，由于第一页面和第二页面属于不同的子***，因此不同涉及到跨***的页面切换。本申请实施例中，页面切换设备可以加载预先缓存的第二子***的vue实例，显示第二子***的vue实例中的第二页面的页面数据。
应当说明的是，加载vue实例实际上就是将vue实例转化为网页的超级文本标记语言(HyperTextMarkup Language，html)节点，html节点是构成网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。例如：html标签、属性、文本、注释、整个文档等都是一个节点。
例如，首先进入第一子***，页面切换设备可以通过fetch方法请求获取第一子***的静态资源，fetch是web提供的一个可以获取异步资源的接口，静态资源具体例如html节点，将该静态资源挂载到对应挂载节点上，从而显示第一子***的第一页面。从第一子***的页面切换至第二子***的页面时，可以在挂载节点上删除第一子***的所有html节点，以卸载第一子***，并重新加载第二子***的所有html节点。这样能够避免两个子***的JS(JavaScript)产生干扰，以及两个子***的级联样式表(Cascading Style Sheets，CSS)产生干扰。
其中涉及到如何获取第二子***的vue实例，第二子***的vue实例可以是上一次离开第二子***时保存的，下面进行具体介绍。
页面切换设备响应于在第二子***的第二页面进行的第二访问操作，保存第二子***的vue实例，从第二页面切换至第一页面。其中，第二访问操作用于访问第一页面。第二访问操作例如单击操作、双击操作等，例如用户在第二页面上点击了第一子***的图标。第二子***的vue实例可以保存页面切换设备的本地，例如浏览器的My Widows文件夹中。第二子***的vue实例包括第二子***涉及的所有页面的页面数据，页面数据的含义请参照前文论述的内容，此处不再赘述。
若用户在第二子***的某个页面进行过输入操作，则第二子***的vue实例还包括该页面的用户操作数据，用户操作数据的含义请参照前文论述的内容，此处不再赘述。具体的，页面切换设备响应于在第二子***的第二页面进行的输入操作，获取用户操作数据，将用户操作数据写入第二子***的vue实例中。例如用户在第二页面的表格中填入了某些数据，此时将用户填写的数据写入第二子***的vue实例。
在一种可能的实施例中，页面切换设备在同一个子***内部进行页面切换时，加载并显示keep-alive中缓存的数据，从而实现页面状态的保持。keep-alive中缓存的数据包括页面数据和用户操作数据，页面数据和用户操作数据的含义请参照前文论述的页面数据和用户操作数据的内容，此处不再赘述。
例如，页面切换设备响应于在第一子***的第一页面进行的第三访问用户操作，第三访问用户操作用于访问第一子***的第三页面，从第一页面切换至第三页面时，加载并显示第一子***的keep-alive中缓存的第三页面的数据。其中，第三访问用户操作请参照前文论述的第一访问用户操作的内容，此处不再赘述。
或者例如，页面切换设备响应于在第二子***的第二页面进行的第四访问用户操作，第四访问用户操作用于访问第二子***的第四页面，从第二页面切换至第四页面时，加载并显示第二子***的keep-alive中缓存的第四页面的数据。其中，第四访问用户操作请参照前文论述的第一访问用户操作的内容，此处不再赘述。
为了更加清楚地说明跨***的页面切换方法，下面进行示例介绍。
页面切换设备首次加载第二子***时，无命中缓存，即不存在预先缓存的第二子***的vue实例，从零开始渲染第二子***的vue实例，如果在第二子***内部切换页面，通过keep-alive实现vue单页面缓存机制，即加载并显示第二子***的keep-alive中缓存的页面数据。如果从第二子***的页面切换到第一子***的页面，在卸载第二子***之前，保存第二子***的vue实例，再切换到第一子***的页面。后续再从第一子***的页面切换回第二子***的页面时，资源管理***中的缓存调度模块会命中预先缓存的第一子***的vue实例，此时不会从零渲染第一子***的页面，而是直接加载第一子***的vue实例，这样就保证了用户在第一子***的页面输入的用户操作数据没有丢失，从而提升用户体验。
基于同一发明构思，本申请实施例提供一种页面切换装置，该装置设置于前文论述的页面切换设备中，具体设置于页面切换设备构建的基于微前端的资源管理***中，该资源管理***包括第一子***和第二子***，第一子***和第二子***对应不同的前端应用，请参照图3，该装置包括：
切换单元301，用于响应于在第一子***的第一页面进行的第一访问用户操作，从第一页面切换至第二子***的第二页面；其中，第一访问用户操作用于访问第二页面；
加载显示单元302，用于加载预先缓存的第二子***的vue实例，显示第二子***的vue实例中的第二页面的页面数据。
在一种可能的实施例中，该装置还包括保存模块303；
保存模块303用于在响应于在第一子***的第一页面进行的第一访问用户操作，从第一页面切换至第二子***的第二页面之前，响应于在第二页面进行的第二访问用户操作，保存第二子***的vue实例；其中，第二访问用户操作用于访问第一页面；
切换模块还用于从第二页面切换至第一页面。
在一种可能的实施例中，该装置还包括写入模块304，写入模块304用于：
在响应于在第二页面进行的第二访问用户操作，保存第二子***的vue实例之前，响应于在第二页面进行的输入用户操作，获取用户操作数据；
将用户操作数据写入第二子***的vue实例中。
在一种可能的实施例中，保存模块303还用于：
在从第一页面切换至第二子***的第二页面之前，若不存在预先缓存的第一子***的vue实例，则保存第一子***当前的vue实例；或者，
若存在预先缓存的第一子***的vue实例，则删除预先缓存的第一子***的vue实例，保存第一子***当前的vue实例。
作为一种实施例，图3论述的装置可以实现前文论述任一的页面切换方法，此处不再赘述。
基于同一发明构思，本申请实施例提供一种电子设备，该设备可以实现前文论述的页面切换设备的功能，请参照图4，该设备包括处理器401和存储器402，
存储器402，用于存储程序指令；
处理器401，用于调用所述存储器402中存储的程序指令，按照获得的程序指令执行前文论述任一的页面切换方法包括的步骤。由于上述电子设备解决问题的原理与页面切换方法相似，因此上述电子设备的实施可以参见方法的实施，重复之处不再赘述。
处理器401可以是一个中央处理单元(central processing unit，CPU)，或者为数字处理单元、或为图像处理器等中的一种或多种组合。存储器602可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器402也可以是非易失性存储器(non-volatile memory)，例如只读存储器，快闪存储器(flashmemory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)、或者存储器402是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器402可以是上述存储器的组合。
作为一种实施例，图4中的处理器401可以实现前文论述任一的页面切换方法，处理器401还可以实现前文图3论述的页面切换装置的功能。
基于同一发明构思，本申请实施例提供一种计算机可读存储介质，计算机程序产品包括：计算机程序代码，当计算机程序代码在计算机上运行时，使得计算机执行如前文论述任一的页面切换方法。由于上述计算机可读存储介质解决问题的原理与页面切换方法相似，因此上述计算机可读存储介质的实施可以参见方法的实施，重复之处不再赘述。
基于同一发明构思，本申请实施例还提供了一种计算机程序产品，该计算机程序产品包括：计算机程序代码，当该计算机程序代码在计算机上运行时，使得计算机执行如前文论述任一的页面切换方法。由于上述计算机程序产品解决问题的原理与页面切换方法相似，因此上述计算机程序产品的实施可以参见方法的实施，重复之处不再赘述。
本领域内的技术人员应明白，本申请的实施例可提供为方法、***、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列用户操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (11)

1.一种页面切换方法，其特征在于，所述方法应用于基于微前端的资源管理***中，所述资源管理***包括第一子***和第二子***，所述第一子***和所述第二子***对应不同的前端应用，所述方法包括：
响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面；其中，所述第一访问操作用于访问所述第二页面；
加载预先缓存的所述第二子***的vue实例，显示所述第二子***的vue实例中的所述第二页面的页面数据。
2.如权利要求1所述的方法，其特征在于，在响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面之前，所述方法还包括：
响应于在所述第二页面进行的第二访问操作，保存所述第二子***的vue实例，从所述第二页面切换至所述第一页面；其中，所述第二访问操作用于访问所述第一页面。
3.如权利要求2所述的方法，其特征在于，在响应于在所述第二页面进行的第二访问操作，保存所述第二子***的vue实例之前，所述方法还包括：
响应于在所述第二页面进行的输入操作，获取用户操作数据；
将所述用户操作数据写入所述第二子***的vue实例中。
4.如权利要求1-3任一项所述的方法，其特征在于，在从所述第一页面切换至所述第二子***的第二页面之前，所述方法还包括：
若不存在预先缓存的所述第一子***的vue实例，则保存所述第一子***当前的vue实例；或者，
若存在预先缓存的所述第一子***的vue实例，则删除预先缓存的所述第一子***的vue实例，保存所述第一子***当前的vue实例。
5.一种页面切换装置，其特征在于，所述装置设置于基于微前端的资源管理***中，所述资源管理***包括第一子***和第二子***，所述第一子***和所述第二子***对应不同的前端应用，所述装置包括：
切换单元，用于响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面；其中，所述第一访问操作用于访问所述第二页面；
加载显示单元，用于加载预先缓存的所述第二子***的vue实例，显示所述第二子***的vue实例中的所述第二页面的页面数据。
6.如权利要求5所述的装置，其特征在于，所述装置还包括保存模块；
所述保存模块用于在响应于在所述第一子***的第一页面进行的第一访问操作，从所述第一页面切换至所述第二子***的第二页面之前，响应于在所述第二页面进行的第二访问操作，保存所述第二子***的vue实例；其中，所述第二访问操作用于访问所述第一页面；
所述切换模块还用于从所述第二页面切换至所述第一页面。
7.如权利要求6所述的装置，其特征在于，所述装置还包括写入模块，所述写入模块用于：
在响应于在所述第二页面进行的第二访问操作，保存所述第二子***的vue实例之前，响应于在所述第二页面进行的输入操作，获取用户操作数据；
将所述用户操作数据写入所述第二子***的vue实例中。
8.如权利要求5-7任一项所述的装置，其特征在于，所述保存模块还用于：
在从所述第一页面切换至所述第二子***的第二页面之前，若不存在预先缓存的所述第一子***的vue实例，则保存所述第一子***当前的vue实例；或者，
若存在预先缓存的所述第一子***的vue实例，则删除预先缓存的所述第一子***的vue实例，保存所述第一子***当前的vue实例。
9.一种电子设备，其特征在于，包括：
存储器，用于存储程序指令；
处理器，用于调用所述存储器中存储的程序指令，按照获得的程序指令执行权利要求1-4中任一项所述的方法包括的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被计算机执行时，使所述计算机执行如权利要求1-4中任一项所述的方法。
11.一种计算机程序产品，其特征在于，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行上述如权利要求1-4中任一项所述的方法。
CN202111361274.XA 2021-11-17 2021-11-17 一种页面切换方法、装置、设备及介质 Pending CN113961298A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111361274.XA CN113961298A (zh) 2021-11-17 2021-11-17 一种页面切换方法、装置、设备及介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111361274.XA CN113961298A (zh) 2021-11-17 2021-11-17 一种页面切换方法、装置、设备及介质

Publications (1)

Publication Number Publication Date
CN113961298A true CN113961298A (zh) 2022-01-21

Family

ID=79470851

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111361274.XA Pending CN113961298A (zh) 2021-11-17 2021-11-17 一种页面切换方法、装置、设备及介质

Country Status (1)

Country Link
CN (1) CN113961298A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116204398A (zh) * 2023-05-06 2023-06-02 北京合众伟奇科技股份有限公司 页面缓存的方法、处理设备及计算机可读存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116204398A (zh) * 2023-05-06 2023-06-02 北京合众伟奇科技股份有限公司 页面缓存的方法、处理设备及计算机可读存储介质
CN116204398B (zh) * 2023-05-06 2023-08-18 北京合众伟奇科技股份有限公司 页面缓存的方法、处理设备及计算机可读存储介质

Similar Documents

Publication Publication Date Title
CN106886570B (zh) 页面处理方法及装置
US8527862B2 (en) Methods for making ajax web applications bookmarkable and crawlable and devices thereof
CN107066631A (zh) 页面的显示方法、装置及电子设备
US20120060083A1 (en) Method for Use in Association With A Multi-Tab Interpretation and Rendering Function
US20140208326A1 (en) File presenting method and apparatus for a smart terminal
CN106294658A (zh) 网页快速展示方法和装置
CN107291449B (zh) 一种页面渲染方法、装置及设备
US9703460B2 (en) Intelligent rendering of webpages
CN113961298A (zh) 一种页面切换方法、装置、设备及介质
CN117390326A (zh) 页面管理方法、装置、设备以及存储介质
CN112395437B (zh) 一种3d模型的加载方法、装置、电子设备及存储介质
CN116821533A (zh) 页面渲染方法、计算机设备和计算机可读存储介质
CN113449216A (zh) 一种文件处理方法、装置及存储介质
CN115438290A (zh) 自动分析单页面应用静态资源并预加载的方法及***
CN115186207A (zh) 加载页面资源的方法及装置、电子设备
CN110727889A (zh) 一种静态网页资源的加载方法、装置、介质及电子设备
CN108804155A (zh) 配置文件获取方法、装置、终端及计算机可读存储介质
CN114528510A (zh) 网页数据处理的方法、装置、电子设备及介质
US10990750B2 (en) Dynamically bundling web page resources
CN107045549B (zh) 一种电子书页数获取方法和装置
CN116257707B (zh) 一种应用发布方法、装置、电子设备及存储介质
CN108255918B (zh) 预读关键词集合的获取方法、网页访问设备及电子设备
CN114296730A (zh) 页面信息处理方法、装置及电子设备
CN117633382A (zh) 一种页面加载方法、装置、电子设备及计算机可读介质
CN117492855A (zh) 页面缓存方法、装置、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination