A page switching method, device, equipment and medium

Abstract

This application relates to the technical field of resource scheduling, and specifically relates to a page switching method, device, equipment and medium, which are used to solve the problem of how to maintain the page state during cross-system page switching. This method is applied to a resource management system based on micro frontends. The resource management system includes a first subsystem and a second subsystem, and the first subsystem and the second subsystem correspond to different front-end applications. The method includes: in response to a first access operation performed on a first page of the first subsystem, switching from the first page to a second page of the second subsystem; wherein, the first access operation is used to access the second page; loading a pre-cached vue instance of the second subsystem, and displaying page data of the second page in the vue instance of the second subsystem.

Description

Technical Field

[0001] This application relates to the technical field of resource scheduling, especially the web application field, and specifically relates to a page switching method, device, equipment, and medium. Background Art

[0002] In the field of web applications, users often switch back and forth between multiple pages. Keep-alive is a built-in component in Vue. When a user switches pages within a system, the page state can be maintained through keep-alive. For example, when switching from page A to page B and then back to page A, the data of page A is still retained.

[0003] However, in a resource management system based on micro frontends, the web application is transformed from a single monolithic application into an application aggregated by multiple small front-end applications. Each front-end application is a subsystem, and there will be a business requirement for page switching between two subsystems. Since the vue instances of different subsystems are different, keep-alive cannot maintain the page state during cross-system page switching. Summary of the Invention

[0004] Embodiments of this application provide a page switching method, device, equipment, and medium, which are used to solve the problem of how to maintain the page state during cross-system page switching.

[0005] In a first aspect, this application provides a page switching method. The method is applied to a resource management system based on micro frontends. The resource management system includes a first subsystem and a second subsystem. The first subsystem and the second subsystem correspond to different front-end applications. The method includes:

[0006] In response to a first access operation performed on a first page of the first subsystem, switch from the first page to a second page of the second subsystem; wherein, the first access operation is used to access the second page;

[0007] Load the pre-cached vue instance of the second subsystem and display the page data of the second page in the vue instance of the second subsystem.

[0008] In an embodiment of the present application, the first subsystem and the second subsystem of the resource management system correspond to different front-end applications. By pre-caching the vue instance of the second subsystem, when switching back from the first page of the first subsystem to the second page of the second subsystem, the pre-cached vue instance of the second subsystem can be loaded, and then the page data of the second page in the vue instance of the second subsystem can be displayed, so as to maintain the page state during cross-system page switching, avoid re-rendering the second page from scratch, quickly display the page data of the second page, and improve the user experience.

[0009] In a possible embodiment, before switching from the first page to the second page of the second subsystem in response to a first access operation performed on the first page of the first subsystem, the method further includes:

[0010] In response to a second access operation performed on the second page, save the vue instance of the second subsystem, and switch from the second page to the first page; wherein, the second access operation is used to access the first page.

[0011] In an embodiment of the present application, before leaving the second page, save the vue instance of the second subsystem so that when switching back to the second page later, the vue instance of the second subsystem can be directly loaded to quickly restore the second page of the second subsystem.

[0012] In a possible embodiment, before saving the vue instance of the second subsystem in response to a second access operation performed on the second page, the method further includes:

[0013] In response to an input operation performed on the second page, obtain user operation data;

[0014] Write the user operation data into the vue instance of the second subsystem.

[0015] In an embodiment of the present application, write the operation data of the user on the second page into the vue instance of the second subsystem so that when switching back to the second page later, the data already input by the user can be retained, avoiding repeated input by the user, and improving the user experience.

[0016] In a possible embodiment, before switching from the first page to the second page of the second subsystem, the method further includes:

[0017] If there is no pre-cached vue instance of the first subsystem, save the current vue instance of the first subsystem; or,

[0018] If there is a pre-cached vue instance of the first subsystem, delete the pre-cached vue instance of the first subsystem and save the current vue instance of the first subsystem.

[0019] In the embodiments of the present application, before leaving the first page, save the current vue instance of the first subsystem, or delete the pre-cached vue instance of the first subsystem and save the current vue instance of the first subsystem, so that when switching back to the first page later, the vue instance of the first subsystem can be directly loaded to quickly restore the page data of the first page.

[0020] In a second aspect, the present application provides a page switching device, which is disposed in a resource management system based on micro frontends. The resource management system includes a first subsystem and a second subsystem, and the first subsystem and the second subsystem correspond to different front-end applications. The device includes:

[0021] A switching unit, configured to switch from the first page to the second page of the second subsystem in response to a first access operation performed on the first page of the first subsystem; wherein, the first access operation is used to access the second page;

[0022] A loading and display unit, configured to load the pre-cached vue instance of the second subsystem and display the page data of the second page in the vue instance of the second subsystem.

[0023] In a possible embodiment, the device further includes a saving module;

[0024] The saving module is configured to save the vue instance of the second subsystem in response to a second access operation performed on the second page before switching from the first page to the second page of the second subsystem in response to a first access operation performed on the first page of the first subsystem; wherein, the second access operation is used to access the first page;

[0025] The switching module is further configured to switch from the second page to the first page.

[0026] In a possible embodiment, the device further includes a writing module, and the writing module is configured to:

[0027] Obtain user operation data in response to an input operation performed on the second page before saving the vue instance of the second subsystem in response to a second access operation performed on the second page;

[0028] Write the user operation data into the vue instance of the second subsystem.

[0029] In a possible embodiment, the saving module is further configured to:

[0030] Before switching from the first page to the second page of the second subsystem, if there is no pre-cached vue instance of the first subsystem, save the current vue instance of the first subsystem; or,

[0031] If there is a pre-cached vue instance of the first subsystem, delete the pre-cached vue instance of the first subsystem and save the current vue instance of the first subsystem.

[0032] In a third aspect, the present application provides an electronic device, including:

[0033] A memory for storing program instructions;

[0034] A processor for calling the program instructions stored in the memory and executing the steps included in the method according to any one of the first aspect.

[0035] In a fourth aspect, the present application provides a computer-readable storage medium, where the computer-readable storage medium stores a computer program, and the computer program includes program instructions, and when the program instructions are executed by a computer, the computer is caused to execute the method according to any one of the first aspect.

[0036] In a fifth aspect, the present application provides a computer program product, where the computer program product includes: computer program code, and when the computer program code runs on a computer, the computer is caused to execute the method according to any one of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 It is a schematic structural diagram of a resource management system based on micro frontends provided by an embodiment of the present application;

[0038] Figure 2 It is a flowchart of a page switching method provided by an embodiment of the present application;

[0039] Figure 3 It is a structural diagram of a page switching device provided by an embodiment of the present application;

[0040] Figure 4 It is a structural diagram of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0041] To make the objectives, technical solutions, and advantages of this application more clearly understood, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of this application. Obviously, the described embodiments are only a part rather than all of the embodiments of this application. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in this application without making creative efforts shall fall within the scope of protection of this application. Without conflict, the embodiments in this application and the features in the embodiments may be combined with each other arbitrarily. And although the logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than here.

[0042] The terms "first" and "second" in the specification, claims, and above-mentioned accompanying drawings of this application are used to distinguish different objects rather than to describe a specific order. In addition, the term "comprising" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units is not limited to the listed steps or units, but optionally further includes steps or units not listed, or optionally further includes other steps or units inherent to these processes, methods, products, or devices. "Multiple" in this application may mean at least two, for example, it may be two, three, or more, and the embodiments of this application do not make limitations.

[0043] Before introducing the page switching method provided by the embodiments of this application, for the convenience of understanding, first, the technical background of the embodiments of this application will be introduced in detail below.

[0044] As the business grows, for the convenience of management, many projects are designed in a micro-frontend architecture. Micro-frontend is an idea similar to microservices, applying the concept of backend microservices to the browser side. According to the business logic, a single web application is decomposed into multiple smaller, simpler, and independent front-end applications. Each front-end application is a subsystem that can run independently, be developed independently, and be deployed independently, greatly improving the development efficiency. However, in the eyes of users, this is still a cohesive single application. Users often need to switch between the pages of multiple subsystems. For example, when a user fills out a form on page A of a certain subsystem, after filling out some form item data, the user needs to leave the current page and go to page B of another subsystem to query, and then return to page A to continue filling. However, when the user switches back to page A, it will be found that the previously filled data has disappeared and needs to be filled in again, resulting in a poor user experience.

[0045] In the prior art, when the page is switched, keep-alive caches the state of the page wrapped therein. When the wrapped page is re-entered next time, the page will not be re-rendered, but the page data of the page will be read from the cache for display. However, keep-alive is a built-in component of vue and can only keep the page state when switching pages within the same vue. Since the vue instances of different subsystems are different, keep-alive cannot keep the page state when switching pages across systems.

[0046] In view of this, an embodiment of the present application provides a page switching method. This method can be executed by a page switching device, which can be implemented by a terminal or a server. The terminal can be, for example, a personal computer, a mobile phone, etc., and the server can be, for example, a physical service or a virtual server, etc.

[0047] In the embodiment of the present application, the page switching device can first implement a micro front-end framework based on front-end route distribution in the browser and build a resource management system based on micro front-ends. Please refer to Figure 1 , which is a schematic structural diagram of the resource management system based on micro front-ends provided by the embodiment of the present application. The resource management system 100 includes a first subsystem 110 and a second subsystem 120. The first subsystem 110 and the second subsystem 120 respectively correspond to different front-end applications. For example, a Web application is split into 2 front-end applications, and the 2 front-end applications include package sales management and product management. The first subsystem 110 corresponds to the sales management application, and the second subsystem 120 corresponds to the product management application.

[0048] It should be noted that Figure 1 taking the resource management system including one first subsystem 110 and one second subsystem 120 as an example, in fact, the number of subsystems is not limited. The number of subsystems is equal to the number of front-end applications, and each subsystem corresponds to one front-end application.

[0049] In the embodiment of the present application, the resource management system based on micro front-ends realizes the complete decoupling of each subsystem, increases the maintainability and scalability of the resource management system in the later stage, and can perform incremental updates on the multi-system. For example, only update the first subsystem or only update the second subsystem among them. It can also quickly integrate new subsystems through simple configuration without modifying the code. In addition, the compilation and build time of the system is also reduced.

[0050] Next, in combination with Figure 1 the resource management system based on micro front-ends shown, taking the page switching device executing the page switching method in this resource management system as an example for introduction. Please refer to Figure 2 , which is a flowchart of a page switching method provided by the embodiment of the present application.

[0051] S210: In response to a first access operation performed on a first page of a first subsystem, switch from the first page to a second page of a second subsystem.

[0052] The current display page of the page switching device is the first page of the first subsystem. The page switching device can switch from the home page of the resource management system to the first page of the first subsystem. For example, when a user enters an account and password, they can log in to the micro-frontend-based resource management system and enter the home page of the resource management system. The home page displays a list of subsystems under the user's permissions. The list of subsystems includes a first subsystem and a second subsystem. The first subsystem is, for example, a sales management subsystem, and the second subsystem is, for example, a product management subsystem. If the user wants to access the first subsystem, they click on the icon of the first subsystem, and the page will navigate to the first subsystem according to the route.

[0053] The page switching device can also switch from other pages of the first subsystem to the first page of the first subsystem. The other pages are the pages of the first subsystem other than the first page. The page switching device can also switch from the second page of the second subsystem to the first page of the first subsystem. The page switching device can also switch from the pages of other subsystems to the first page of the first subsystem. The other subsystems are the subsystems in the resource management system other than the first subsystem and the second subsystem.

[0054] In a possible embodiment, considering that it may be switched back to the first page later, to avoid the loss of page data on the first page, the page switching device can, in response to a first access operation performed on the first page of the first subsystem, save the vue instance of the first subsystem and then switch from the first page to the second page of the second subsystem.

[0055] Among them, the first access operation is used to access the second page of the second subsystem. The first access operation is, for example, a click operation, a double-click operation, etc. For example, when a user wants to access the second subsystem, they click on the icon of the second subsystem on the first page. Vue is a lightweight framework. Each subsystem corresponds to a vue instance, and each vue instance is used to store the data of the corresponding subsystem. The vue instance of the first subsystem includes the page data and user operation data of all pages involved in the first subsystem. The page data is the data that the page defaults to display, and the user operation data is the data input by the user. It should be noted that if the user has not performed any input operations on any page of the first subsystem, the vue instance of the first subsystem does not include user operation data.

[0056] The page switching device handles different situations according to whether the vue instance of the first subsystem has been cached. The following is an introduction to each case.

[0057] In the first case, there is no pre-cached vue instance of the first subsystem.

[0058] If the page switching device switches to the first subsystem for the first time, there is no pre-cached vue instance of the first subsystem in the page switching device, and the current vue instance of the first subsystem is directly saved.

[0059] In the second case, there is a pre-cached vue instance of the first subsystem.

[0060] If the page switching device has entered the first subsystem before, there should be a pre-cached vue instance of the first subsystem at that time in the page switching device. However, after the page switching device enters the first page of the first subsystem this time, the user may perform input operations on the first page, resulting in changes to the vue instance of the first subsystem. Therefore, in the embodiments of the present application, if there is a pre-cached vue instance of the first subsystem, the pre-cached vue instance of the first subsystem is updated. Specifically, the pre-cached vue instance of the first subsystem can be deleted, and the current vue instance of the first subsystem is saved.

[0061] Considering that the user may have accidentally entered the first subsystem this time and exited the first subsystem without performing any input operations on the first page. At this time, the current vue instance of the first subsystem is the same as the pre-cached vue instance of the first subsystem. If the pre-cached vue instance of the first subsystem is updated, the efficiency of switching pages will be reduced. Therefore, in a possible embodiment, the page switching device can detect whether the user has performed input operations on the first page of the first subsystem. If it is determined that the user has not performed any input operations on the first page, the pre-cached vue instance of the first subsystem is not updated. If it is determined that the user has performed input operations on the first page, the pre-cached vue instance of the first subsystem is updated.

[0062] In a possible embodiment, in response to the first access operation performed on the first page of the first subsystem, the page switching device may also not save the vue instance of the first subsystem and directly switch from the first page to the second page of the second subsystem. For example, the user determines that they will not switch back to the first subsystem later.

[0063] S220. Load the pre-cached vue instance of the second subsystem and display the page data of the second page in the vue instance of the second subsystem.

[0064] After switching from the first page to the second page, since the first page and the second page belong to different subsystems, cross-system page switching is involved. In the embodiments of the present application, the page switching device can load the pre-cached vue instance of the second subsystem and display the page data of the second page in the vue instance of the second subsystem.

[0065] It should be noted that loading the vue instance is actually converting the vue instance into a HyperText Markup Language (html) node of the web page. The html node is the most basic component that makes up the web page, and each part of the web page can be called a node. For example: html tags, attributes, text, comments, the entire document, etc. are all nodes.

[0066] For example, first enter the first subsystem. The page switching device can request and obtain the static resources of the first subsystem through the fetch method. Fetch is an interface provided by the web to obtain asynchronous resources. The static resources are specifically html nodes, for example. Mount the static resources on the corresponding mounting nodes to display the first page of the first subsystem. When switching from the page of the first subsystem to the page of the second subsystem, all html nodes of the first subsystem can be deleted on the mounting nodes to unload the first subsystem and reload all html nodes of the second subsystem. This can avoid interference between the JS (JavaScript) of the two subsystems and the Cascading Style Sheets (CSS) of the two subsystems.

[0067] Among them, how to obtain the vue instance of the second subsystem is involved. The vue instance of the second subsystem can be saved when leaving the second subsystem last time. The following is a specific introduction.

[0068] The page switching device responds to the second access operation performed on the second page of the second subsystem, saves the vue instance of the second subsystem, and switches from the second page to the first page. Among them, the second access operation is used to access the first page. The second access operation is, for example, a click operation, a double-click operation, etc. For example, the user clicks on the icon of the first subsystem on the second page. The vue instance of the second subsystem can be saved locally on the page switching device, for example, in the My Widows folder of the browser. The vue instance of the second subsystem includes the page data of all pages involved in the second subsystem. The meaning of the page data can refer to the content discussed above and will not be elaborated here.

[0069] If the user has performed an input operation on a certain page of the second subsystem, the vue instance of the second subsystem also includes the user operation data of that page. For the meaning of the user operation data, please refer to the content discussed above, and it will not be elaborated here. Specifically, the page switching device responds to the input operation performed on the second page of the second subsystem, obtains the user operation data, and writes the user operation data into the vue instance of the second subsystem. For example, if the user fills in some data in the table on the second page, the data filled in by the user is written into the vue instance of the second subsystem at this time.

[0070] In a possible embodiment, when the page switching device performs page switching within the same subsystem, it loads and displays the data cached in keep-alive, so as to achieve the preservation of the page state. The data cached in keep-alive includes page data and user operation data. For the meaning of the page data and user operation data, please refer to the content of the page data and user operation data discussed above, and it will not be elaborated here.

[0071] For example, the page switching device responds to the third access user operation performed on the first page of the first subsystem. The third access user operation is used to access the third page of the first subsystem. When switching from the first page to the third page, it loads and displays the data of the third page cached in the keep-alive of the first subsystem. Among them, the third access user operation please refer to the content of the first access user operation discussed above, and it will not be elaborated here.

[0072] Or for example, the page switching device responds to the fourth access user operation performed on the second page of the second subsystem. The fourth access user operation is used to access the fourth page of the second subsystem. When switching from the second page to the fourth page, it loads and displays the data of the fourth page cached in the keep-alive of the second subsystem. Among them, the fourth access user operation please refer to the content of the first access user operation discussed above, and it will not be elaborated here.

[0073] To more clearly illustrate the cross-system page switching method, the following is an example introduction.

[0074] When the page switching device first loads the second subsystem, there is no cached hit, that is, there is no pre-cached vue instance of the second subsystem. The vue instance of the second subsystem is rendered from scratch. If the page is switched within the second subsystem, the vue single-page caching mechanism is implemented through keep-alive, that is, the page data cached in the keep-alive of the second subsystem is loaded and displayed. If the page is switched from the page of the second subsystem to the page of the first subsystem, before unloading the second subsystem, the vue instance of the second subsystem is saved, and then the page is switched to the first subsystem. When the page is switched back from the page of the first subsystem to the page of the second subsystem later, the cache scheduling module in the resource management system will hit the pre-cached vue instance of the first subsystem. At this time, the page of the first subsystem will not be rendered from scratch, but the vue instance of the first subsystem will be directly loaded, which ensures that the user operation data input by the user on the page of the first subsystem is not lost, thus improving the user experience.

[0075] Based on the same inventive concept, an embodiment of the present application provides a page switching device. This device is set in the page switching device described above, specifically set in the resource management system based on micro frontends constructed by the page switching device. This resource management system includes a first subsystem and a second subsystem, and the first subsystem and the second subsystem correspond to different front-end applications. Please refer to Figure 3 , the device includes:

[0076] A switching unit 301, configured to respond to a first access user operation performed on a first page of the first subsystem, and switch from the first page to a second page of the second subsystem; wherein, the first access user operation is used to access the second page;

[0077] A loading and display unit 302, configured to load a pre-cached vue instance of the second subsystem and display the page data of the second page in the vue instance of the second subsystem.

[0078] In a possible embodiment, the device further includes a saving module 303;

[0079] The saving module 303 is configured to save the vue instance of the second subsystem in response to a second access user operation performed on the second page before switching from the first page to the second page of the second subsystem in response to a first access user operation performed on the first page of the first subsystem; wherein, the second access user operation is used to access the first page;

[0080] The switching module is further configured to switch from the second page to the first page.

[0081] In a possible embodiment, the device further includes a writing module 304, and the writing module 304 is configured to:

[0082] Before saving the vue instance of the second subsystem in response to a second access user operation performed on the second page, obtain user operation data in response to an input user operation performed on the second page;

[0083] Write the user operation data into the vue instance of the second subsystem.

[0084] In a possible embodiment, the saving module 303 is further configured to:

[0085] Before switching from the first page to the second page of the second subsystem, if there is no pre-cached vue instance of the first subsystem, save the current vue instance of the first subsystem; or,

[0086] If there is a pre-cached vue instance of the first subsystem, delete the pre-cached vue instance of the first subsystem and save the current vue instance of the first subsystem.

[0087] As an embodiment, Figure 3 The described device can implement any of the page switching methods discussed above, which will not be elaborated here.

[0088] Based on the same inventive concept, an embodiment of the present application provides an electronic device, which can implement the functions of the page switching device discussed above. Please refer to Figure 4 , the device includes a processor 401 and a memory 402,

[0089] The memory 402 is used to store program instructions;

[0090] The processor 401 is configured to call the program instructions stored in the memory 402 and execute the steps included in any of the page switching methods discussed above according to the obtained program instructions. Since the principle of the above electronic device for solving problems is similar to that of the page switching method, the implementation of the above electronic device can refer to the implementation of the method, and the repeated parts will not be elaborated.

[0091] The processor 401 can be a central processing unit (CPU), or one or a combination of a digital processing unit, an image processor, etc. The memory 602 can be a volatile memory, such as a random-access memory (RAM); the memory 402 can also be a non-volatile memory, such as a read-only memory, a flash memory, a hard disk drive (HDD), or a solid-state drive (SSD), or the memory 402 is any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto. The memory 402 can be a combination of the above memories.

[0092] As an embodiment, Figure 4 the processor 401 in can implement any of the page switching methods discussed above, and the processor 401 can also implement the functions of the page switching device discussed above. Figure 3 discussed.

[0093] Based on the same inventive concept, an embodiment of the present application provides a computer-readable storage medium. The computer program product includes: computer program code, which when run on a computer, causes the computer to execute any of the page switching methods discussed above. Since the principle of solving problems by the above computer-readable storage medium is similar to that of the page switching method, the implementation of the above computer-readable storage medium can refer to the implementation of the method, and the repeated parts will not be elaborated.

[0094] Based on the same inventive concept, an embodiment of the present application further provides a computer program product. The computer program product includes: computer program code, which when run on a computer, causes the computer to execute any of the page switching methods discussed above. Since the principle of solving problems by the above computer program product is similar to that of the page switching method, the implementation of the above computer program product can refer to the implementation of the method, and the repeated parts will not be elaborated.

[0095] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0096] This application is described with reference to the flowcharts and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each flow and / or block in the flowchart and / or block diagram, and the combination of flows and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, such that the instructions executed by the processor of the computer or other programmable data processing device produce means for implementing the functions specified in one Figure 1 flow or multiple flows and / or blocks Figure 1 block or multiple blocks.

[0097] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the instructions stored in the computer-readable memory produce a manufactured article including instruction means that implement the functions specified in one Figure 1 flow or multiple flows and / or blocks Figure 1 block or multiple blocks.

[0098] These computer program instructions can also be loaded onto a computer or other programmable data processing device, such that a series of user operation steps are executed on the computer or other programmable device to generate a computer-implemented process, so that the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one Figure 1 flow or multiple flows and / or blocks Figure 1 block or multiple blocks.

[0099] Obviously, those skilled in the art can make various changes and modifications to this application without departing from the spirit and scope of this application. Thus, if these modifications and variations of this application fall within the scope of the claims of this application and their equivalent technologies, this application is also intended to include these changes and modifications.

Claims

1. A page switching method, characterized in that, The method is applied to a resource management system based on micro frontends. The resource management system includes a first subsystem and a second subsystem. The first subsystem and the second subsystem correspond to different front-end applications and different Vue instances. Each Vue instance is used to store data corresponding to the respective subsystem. The method includes: In response to a first access operation performed on a first page of the first subsystem, caching the Vue instance corresponding to the first subsystem, and switching from the first page to a second page of the second subsystem; wherein, the first access operation is used to access the second page; Loading the pre-cached Vue instance of the second subsystem, and displaying the page data of the second page in the Vue instance of the second subsystem; Wherein, caching the Vue instance corresponding to the first subsystem includes: When it is determined that there is no input data of the user in the first page to be cached, using the already cached Vue instance corresponding to the first subsystem as the Vue cache of the first subsystem that already exists in the cache, as the caching result of this time; Before switching from the first page to the second page of the second subsystem in response to a first access operation performed on a first page of the first subsystem, the method further includes: In response to a second access operation performed on the second page, saving the Vue instance of the second subsystem, and switching from the second page to the first page; wherein, the second access operation is used to access the first page; the Vue instance of the second subsystem includes: the page data of each page in the second subsystem, and / or, user operation data triggered by the user for the second subsystem.

2. The method according to claim 1, characterized in that, Before saving the Vue instance of the second subsystem in response to a second access operation performed on the second page, the method further includes: In response to an input operation performed on the second page, obtaining user operation data; Writing the user operation data into the Vue instance of the second subsystem.

3. The method according to claim 1 or 2, characterized in that, Before switching from the first page to the second page of the second subsystem, the method further includes: If there is no pre-cached Vue instance of the first subsystem, saving the current Vue instance of the first subsystem; or, If there is a pre-cached Vue instance of the first subsystem, deleting the pre-cached Vue instance of the first subsystem and saving the current Vue instance of the first subsystem.

4. A page switching device, characterized in that, The device is arranged in a resource management system based on micro frontends. The resource management system includes a first subsystem and a second subsystem. The first subsystem and the second subsystem correspond to different front-end applications and different Vue instances. Each Vue instance is used to store data corresponding to the respective subsystem. The device includes: A switching unit, configured to cache the Vue instance corresponding to the first subsystem in response to a first access operation performed on a first page of the first subsystem, and switch from the first page to a second page of the second subsystem; wherein, the first access operation is used to access the second page; A loading and display unit for loading the vue instance of the second subsystem cached in advance and displaying the page data of the second page in the vue instance of the second subsystem; Among them, when the switching unit is used to cache the vue instance corresponding to the first subsystem, it is specifically used for: when it is determined that there is no input data of the user in the first page to be cached, the vue instance corresponding to the first subsystem that has been cached is used as the vue cache of the first subsystem that already exists in the cache and used as the cache result this time; A saving module for saving the vue instance of the second subsystem in response to a second access operation performed on the second page before switching from the first page of the first subsystem to the second page of the second subsystem; wherein, the second access operation is used to access the first page; The switching unit is further used to switch from the second page to the first page.

5. The device according to claim 4, wherein, The device further includes a writing module, and the writing module is used for: Before saving the vue instance of the second subsystem in response to a second access operation performed on the second page, in response to an input operation performed on the second page, obtaining user operation data; Writing the user operation data into the vue instance of the second subsystem.

6. The device according to claim 4 or 5, characterized in that, The saving module is further used for: Before switching from the first page to the second page of the second subsystem, if there is no pre-cached vue instance of the first subsystem, saving the current vue instance of the first subsystem; or, If there is a pre-cached vue instance of the first subsystem, deleting the pre-cached vue instance of the first subsystem and saving the current vue instance of the first subsystem.

7. An electronic device, characterized in that, Including: A memory for storing program instructions; A processor for calling the program instructions stored in the memory and executing the steps included in the method according to any one of claims 1-3 according to the obtained program instructions.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, and the computer program includes program instructions, and when the program instructions are executed by a computer, the computer is caused to execute the method according to any one of claims 1-3.

9. A computer program product, characterized in that, The computer program product includes: computer program code, and when the computer program code runs on a computer, the computer is caused to execute the method according to any one of the above claims 1-3.

Images