Page management method and device, equipment and medium

Abstract

The invention belongs to the field of research and development, and relates to a page management method which comprises the following steps: receiving a first trigger instruction of a first menu tab, and analyzing first menu identification information from the first trigger instruction; based on the first menu identification information, judging whether a label page instance corresponding to the first menu tab exists in a routing tab component or not; if not, creating a new tab instance according to the first menu identification information to obtain a first tab instance; monitoring and recording a browser historical navigation behavior under the first label page instance through preset historical record proxy middleware; and activating the first tab instance, obtaining first page content of the tab corresponding to the activated first tab instance, and rendering and displaying the first page content through the routing tab component. The invention further provides a device, equipment and a medium. In addition, the invention also relates to a block chain technology, and the first menu identification information can be stored in a block chain. The page management efficiency can be improved.

Description

Technical Field

[0001] The present application relates to the field of research and development technology, and in particular to a page management method, device, equipment and medium. Background Art

[0002] With the rapid development of Web technology, Single Page Application (SPA) has become the mainstream mode of modern Web development with its excellent interactive experience, high maintainability and high development efficiency. In SPA, routing scheme is the core component to achieve seamless switching and state management between pages. At present, mainstream frameworks widely used in the industry, such as Vue, React and Angular, all rely on the browser's native History object to implement the functions of forwarding, returning and jumping to a specific history record. These frameworks dynamically insert or remove history records into the browser through JavaScript code, so as to achieve page jump without reloading the entire page.

[0003] However, in actual applications, especially in SPA projects with complex functions and many modules, users may frequently jump between different modules. Since the browser's native History stack will faithfully record each jump action, the History record may be interspersed with jump information from different modules. When a user tries to click the back button in a module, he may accidentally jump to the previous page in the entire browsing history instead of the previous page in the current module. This confusion in the order of page jumps not only destroys the user's operational continuity, but also seriously affects their operational experience and office efficiency.

[0004] In summary, in the current SPA project, the routing solution based on the browser's native History object has significant defects in complex module jump scenarios, that is, History records are interspersed with each other, resulting in a disordered page jump order when executing user operations, which in turn affects the operation experience and office efficiency. Summary of the invention

[0005] The purpose of the embodiments of the present application is to propose a page management method, device, equipment and medium to solve the problem that in existing single-page application projects, the browser native History object records are interspersed with each other, resulting in a disorder in the page opening order, thereby causing low page management efficiency.

[0006] In order to solve the above technical problems, the present application provides a page management method, which adopts the following technical solutions:

[0007] Receive a first trigger instruction for a first menu tab, and parse the first menu identification information from the first trigger instruction; based on the first menu identification information, determine whether there is a tab page instance corresponding to the first menu tab in the routing tab component; if there is no tab page instance corresponding to the first menu tab in the routing tab component, create a new tab page instance according to the first menu identification information to obtain the first tab page instance; through the preset history proxy middleware, monitor and record the browser history navigation behavior under the first tab page instance; activate the first tab page instance, obtain the first page content of the tab page corresponding to the activated first tab page instance, and render and display the first page content through the routing tab component.

[0008] Further, based on the first menu identification information, the step of determining whether there is a tab page instance corresponding to the first menu tab in the routing tab component specifically includes:

[0009] Get the tab identification information of all tabs in the routing tab component, and match the first menu identification information with the tab identification information; if the first menu identification information matches the tab identification information, determine that there is a tab page instance corresponding to the first menu tab in the routing tab component; if the first menu identification information does not match the tab identification information, determine that there is no tab page instance corresponding to the first menu tab in the routing tab component.

[0010] Further, the step of creating a new tab page instance according to the first menu identification information to obtain the first tab page instance specifically includes:

[0011] According to the first menu identification information, obtain tab configuration information, the tab configuration information including interface layout information and control information; according to the interface layout information and control information, create a new tab instance; associate the new tab instance with the first menu identification information to obtain a first tab instance.

[0012] Furthermore, after the step of creating a new tab page instance according to the first menu identification information and obtaining the first tab page instance, the method further includes:

[0013] Add the first tab page instance to the queue of the routing tab component; determine the target position of the first tab page instance in the queue of the routing tab component according to the first menu identification information; and update the display state of the routing tab component according to the target position.

[0014] Further, after the step of determining whether there is a tab page instance corresponding to the first menu tab in the routing tab component based on the first menu identification information, the method further includes:

[0015] If there is a tab page instance corresponding to the first menu tab in the routing tab component, obtain the routing jump operation information recorded by the history proxy middleware; determine the tab page instance corresponding to the first menu tab as the second tab page instance; based on the routing jump operation information, activate the second tab page instance to obtain the activated second tab page instance; obtain the second page content of the tab page corresponding to the activated second tab page instance, and render and display the second page content through the routing tab component.

[0016] Further, after activating the first tab page instance, obtaining the first page content of the tab page corresponding to the activated first tab page instance, and rendering and displaying the first page content through the routing tab component, the method further includes:

[0017] When the second trigger instruction of the second menu tab is monitored, the second menu identification information is parsed from the second trigger instruction; according to the second menu identification information, the tab instance corresponding to the second menu tab is searched in the routing tab component; if the tab instance corresponding to the second menu tab is found, the tab instance corresponding to the second menu tab is determined as the third tab instance, and the status information of the third tab instance is obtained through the history proxy middleware; according to the status information, the currently activated tab instance is set to an inactive state, and the third tab instance is set to an activated state; the third page content of the tab of the activated third tab instance is obtained, and the third page content is rendered and displayed through the routing tab component.

[0018] Further, after the step of searching the routing tab component for a tab page instance corresponding to the second menu tab according to the second menu identification information, the method further includes:

[0019] If the tab instance corresponding to the second menu tab is not found, a tab instance corresponding to the second menu tab is created based on the second menu identification information to obtain a fourth tab instance; through the history proxy middleware, the browser history navigation behavior under the fourth tab instance is monitored and recorded, and the fourth tab instance is set to an activated state; the fourth page content of the tab of the activated fourth tab instance is obtained, and the fourth page content is rendered and displayed through the routing tab component.

[0020] In order to solve the above technical problems, the embodiment of the present application further provides a page management device, which adopts the following technical solutions:

[0021] A receiving module, used for receiving a first trigger instruction of a first menu tab, and parsing first menu identification information from the first trigger instruction;

[0022] A judgment module, used for judging whether there is a tab page instance corresponding to the first menu tab in the routing tab component based on the first menu identification information;

[0023] A first creation module, configured to create a new tab page instance according to the first menu identification information to obtain the first tab page instance if the tab page instance corresponding to the first menu tab does not exist in the routing tab component;

[0024] The recording module is used to monitor and record the browser history navigation behavior under the first tab page instance through the preset history record proxy middleware;

[0025] The activation module is used to activate the first tab page instance, obtain the first page content of the tab page corresponding to the activated first tab page instance, and render and display the first page content through the routing tab component.

[0026] In order to solve the above technical problems, an embodiment of the present application also provides a computer device, including a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the above page management method are implemented.

[0027] In order to solve the above technical problems, an embodiment of the present application also provides a computer-readable storage medium, which stores computer-readable instructions. The computer-readable instructions can be executed by at least one processor to enable at least one processor to perform the steps of the above-mentioned page management method.

[0028] Compared with the prior art, the embodiment of the present application has the following beneficial effects: by introducing the routing tab component and the preset history proxy middleware, the user experience in the complex module jump scenario in the SPA project is significantly optimized. Specifically, when the trigger instruction of the first menu tab is received, the corresponding menu identification information can be accurately parsed, and the corresponding tab instance can be intelligently judged whether there is a corresponding tab instance in the routing tab component. If not, a new tab instance is created immediately to ensure that the page requested by the user can be responded to quickly. More importantly, through the monitoring and recording functions of the history proxy middleware, this solution can accurately capture and manage the browser history navigation behavior under each tab instance. This design effectively avoids the problem of interpenetration of different module jump records in the browser's native History stack, so that the history records under each tab are kept independent and clear. When a user activates a tab instance, the corresponding page content can be quickly obtained and rendered, and seamless display can be achieved through the routing tab component. This process not only ensures the continuity of user operations, but also significantly improves the operating experience and office efficiency, so that the SPA project can also show excellent interactive performance in complex module jump scenarios and improve the efficiency of page management. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] In order to more clearly illustrate the scheme in the present application, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present application. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0030] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;

[0031] Figure 2 It is a flow chart of a page management method provided by this application;

[0032] Figure 3 It is a structural schematic diagram of a page management device provided by the present application;

[0033] Figure 4 It is a structural schematic diagram of a computer device provided by this application. DETAILED DESCRIPTION

[0034] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present application; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present application; the terms "including" and "having" and any variations thereof in the specification and claims of the present application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0035] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0036] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0037] like Figure 1As shown, the system architecture 100 may include a terminal device 101, a network 102 and a server 103. The terminal device 101 may be a laptop 1011, a tablet computer 1012 or a mobile phone 1013. The network 102 is used to provide a medium for a communication link between the terminal device 101 and the server 103. The network 102 may include various connection types, such as wired, wireless communication links or optical fiber cables.

[0038] The user can use the terminal device 101 to interact with the server 103 through the network 102 to receive or send messages, etc. Various communication client applications can be installed on the terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0039] The terminal device 101 can be any electronic device with a display screen and supporting web browsing. In addition to a laptop computer 1011, a tablet computer 1012 or a mobile phone 1013, the terminal device 101 can also be an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 (Moving Picture Experts Group Audio Layer IV), a laptop computer, a desktop computer, etc.

[0040] The server 103 may be a server that provides various services, such as a background server that provides support for a web page displayed on the terminal device 101 .

[0041] It should be noted that the page management method provided in the embodiment of the present application is generally executed by a server, and accordingly, the page management device is generally set in the server.

[0042] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0043] Continue to refer Figure 2 , shows a flow chart of an embodiment of a page management method according to the present application. The page management method comprises the following steps:

[0044] Step S201: receiving a first trigger instruction of a first menu tab, and parsing first menu identification information from the first trigger instruction.

[0045] In this embodiment, the electronic device (eg, Figure 1The server shown in the figure) can receive the first trigger instruction of the first menu tab through a wired connection or a wireless connection. It should be noted that the above wireless connection method may include but is not limited to 3G / 4G / 5G connection, WiFi connection, Bluetooth connection, WiMAX connection, Zigbee connection, UWB (ultra wideband) connection, and other wireless connection methods currently known or to be developed in the future.

[0046] Among them, the first menu tab refers to the first clickable element on the user interface used to represent different functional modules or page entrances. This element contains unique identification information, which is used to indicate the specific content or functional area that the user wants to access. For example, in a SPA application, when a user clicks on the "User Management" menu tab, it means that he wants to enter the function page related to user management. The first menu tab is determined by the user interface design and is one of the entrances for users to interact with the SPA application. It serves as the starting point for triggering subsequent page jumps or function execution.

[0047] Among them, the first trigger instruction refers to the signal or command issued by the user interface layer to instruct the execution of a specific action (such as page jump) when the user clicks on the first menu tab. The instruction contains unique information that can identify the clicked menu tab. It can be triggered by interactive methods such as user clicks or touches. It contains an instruction data packet with information such as trigger time and trigger source (i.e. menu tab). It can be used as the basis for subsequent logical processing (such as page jump, function execution). For example, the instruction that triggers a page jump is generated after the user clicks on the "User Management" menu tab.

[0048] Among them, the first menu identification information is used to uniquely identify the information of the first menu tab, which may include menu name, ID, path, etc. The first menu identification information is parsed in the trigger instruction and used for positioning subsequent page jumps or function executions. The first menu identification information is determined when the menu tab is designed or configured. A unique string or number that can accurately reflect the identity of the menu tab. It can be used as a basis for locating the target page or function when jumping to a page or executing a function. For example, "userManagement" is a string that uniquely identifies the user management menu tab.

[0049] Step S202: Based on the first menu identification information, determine whether there is a tab page instance corresponding to the first menu tab in the routing tab component.

[0050] Among them, the routing tab component refers to the component used to manage switching between multiple pages or functional modules in the SPA application. The routing tab component enables users to seamlessly switch between different pages or functional modules by maintaining a set of tab instances. It can be designed and implemented by the SPA framework or developers themselves. It is a component entity with functions such as tab management and page rendering. It can improve the interactive experience and maintainability of SPA applications. For example, SPA routing management components such as Router Tab.

[0051] Among them, the tab page instance corresponding to the first menu tab refers to the tab page entity associated with the first menu tab in the routing tab component. The instance contains all the status information and rendering content of the page corresponding to the first menu tab. It can be created or found by the routing tab component according to the first menu identification information. An object instance with attributes such as unique identification, page status, and rendering content. It can be used as a page carrier when a user accesses a specific page or functional module in the current SPA application. For example, the tab page instance corresponding to the "User Management" menu tab.

[0052] Step S203: If the tab page instance corresponding to the first menu tab does not exist in the routing tab component, a new tab page instance is created according to the first menu identification information to obtain the first tab page instance.

[0053] Among them, the first tab page instance refers to a tab page instance newly created according to the first menu identification information when there is no tab page instance corresponding to the first menu tab in the routing tab component. The first tab page instance is a newly created object instance with attributes such as unique identification and initial page state. It is the page carrier when the user visits a new page or functional module. It can be dynamically created by the routing tab component according to user operations. It can be used as a page container when the user visits a new page or functional module. For example, the tab page instance created when the user clicks the "User Management" menu tab for the first time.

[0054] Step S204: monitor and record the browser history navigation behavior under the first tab page instance through the preset history record proxy middleware.

[0055] Among them, the history proxy middleware refers to the middleware used to monitor and record the browser's historical navigation behavior in the SPA application. The middleware implements the history management of page jumps in the SPA application by intercepting and modifying the browser's history operations. It can be designed and implemented by the developer himself or using a third-party library. A middleware entity with the function of monitoring, recording, and modifying browser history records. It can improve the history management capabilities and user experience of SPA applications. For example, the History API proxy middleware used to monitor and record the page jump history records in SPA applications.

[0056] Among them, browser history navigation behavior refers to the page jump behavior triggered by users in the browser by clicking links, using forward / back buttons, etc. These behaviors will cause changes in browser history. Browser history navigation behavior comes from user interaction operations. It can represent page jump events, history changes, etc. It can be used as a basis for page jump history management in SPA applications. For example, the page jump behavior caused by the user clicking the forward button.

[0057] Step S205: activating the first tab page instance, obtaining the first page content of the tab page corresponding to the activated first tab page instance, and rendering and displaying the first page content through the routing tab component.

[0058] Activation refers to the operation of setting a tab instance as the current active state in a SPA application. The activated tab instance will be responsible for rendering and displaying its content. Activation comes from user interaction or automatic program execution. It can represent the change of the tab instance state, such as from an inactive state to an active state. It can enable users to switch seamlessly between different pages or functional modules. For example, after the user clicks the "User Management" menu tab, the corresponding tab instance is activated.

[0059] Among them, a tab page refers to a visual container used to represent a single page or functional module in a SPA application. A tab page is usually associated with a tab page instance in a routing tab component and is used to render and display the content of the page. A tab page can be created by a routing tab component based on user operations or configurations. A visual element with attributes such as a unique identifier and page content. It can be used as a visual display window when a user accesses a specific page or functional module. For example, a tab page used to display the content of the "User Management" page in a SPA application.

[0060] The first page content refers to the page content associated with the first menu tab or the first tab page instance. This content is usually provided by the backend service or dynamically generated by the front-end code, and rendered to the page through the routing tab component. The first page content has HTML, CSS, JavaScript and other codes in a specific format and structure. It can provide users with visual page information and interactive functions. For example, the user list, search box and other content in the "User Management" page.

[0061] Rendering refers to the process of converting page content (such as HTML, CSS, JavaScript, etc.) into a visual web page interface. Rendering can be done by the browser, but in SPA applications, it can also be done through front-end frameworks or libraries (such as React, Vue, etc.). Rendering represents the process of converting page content from code or data to a visual web page interface. The page content can be presented to the user to enable user interaction with the SPA application. For example, the HTML code of the "User Management" page is rendered into visual interface elements such as user lists and search boxes.

[0062] The embodiment of the present application can significantly optimize the user experience in the complex module jump scenario in the SPA project by introducing the routing tab component and the preset history proxy middleware. Specifically, when the trigger instruction of the first menu tab is received, the corresponding menu identification information can be accurately parsed, and the corresponding tab page instance can be intelligently judged whether there is a corresponding tab page instance in the routing tab component. If not, a new tab page instance is created immediately to ensure that the page requested by the user is responded to quickly. More importantly, through the monitoring and recording functions of the history proxy middleware, this solution can accurately capture and manage the browser history navigation behavior under each tab page instance. This design effectively avoids the problem of interpenetration of different module jump records in the browser's native History stack, so that the history records under each tab page remain independent and clear. When a user activates a tab page instance, the corresponding page content can be quickly obtained and rendered, and seamless display can be achieved through the routing tab component. This process not only ensures the continuity of user operations, but also significantly improves the operating experience and office efficiency, so that the SPA project can also show excellent interactive performance in complex module jump scenarios and improve the efficiency of page management.

[0063] In some optional implementations of this embodiment, step 202, based on the first menu identification information, determines whether there is a tab page instance corresponding to the first menu tab in the routing tab component, specifically including the following steps:

[0064] Get the tab identification information of all tabs in the routing tab component, and match the first menu identification information with the tab identification information; if the first menu identification information matches the tab identification information, determine that there is a tab page instance corresponding to the first menu tab in the routing tab component; if the first menu identification information does not match the tab identification information, determine that there is no tab page instance corresponding to the first menu tab in the routing tab component.

[0065] The tab identification information refers to the specific data used to uniquely identify each tab instance in the routing tab component. This data usually comes from the system's initialization process for the tab instance, and is generated through algorithms or rules to ensure that each tab instance can be accurately distinguished. The tab identification information may include but is not limited to the tab ID, name, specific code, etc., which represents the identity and attributes of the tab instance.

[0066] Among them, matching is used to determine whether the first menu identification information is consistent with the tab identification information of all tabs in the routing tab component. The matching process can be implemented by an algorithm, for example, it can be based on string comparison, hash value comparison or other advanced matching algorithms. The purpose of matching is to quickly and accurately identify whether there is a tab instance corresponding to the first menu identification information in the routing tab component. For example, when a user tries to access the "User Management" module, the system will use "userManagement" as the first menu identification information to match the tab identification information of all tabs in the routing tab component. If matching tab identification information such as "userManagement-tab-001" is found, the tab instance is directly activated.

[0067] In one example, take the Web application of a large financial platform as an example. The platform provides multiple functional modules including account management, transaction records, and fund transfer. When a user tries to access a functional module, the system will perform the following steps: obtain the tab identification information of all currently opened financial functional modules through the routing tab component. These tab identification information usually include the unique ID, name or specific code of the module, which is used to uniquely identify the tab instance of each functional module. When a user clicks on a menu item of a financial functional module, the system extracts the first menu identification information (such as "Fund Transfer-menu-001") from the menu item. Then, the system matches this first menu identification information with the tab identification information of all tabs in the routing tab component one by one. If the match is successful, that is, the first menu identification information is completely consistent with a certain tab identification information, the system determines that the tab instance corresponding to the functional module already exists in the routing tab component. At this time, the system will directly activate the tab instance and render its content on the page for the user to view and operate. If the match fails, that is, the first menu identification information is inconsistent with all the tab identification information, the system determines that there is no tab page instance corresponding to the functional module in the routing tab component. At this time, the system will create a new tab page instance and associate it with the first menu identification information for subsequent management and identification, and directly activate the new tab page instance and render its content on the page for users to view and operate.

[0068] The embodiment of the present application can quickly determine the existence status of the tab instance corresponding to the first menu tab by accurately obtaining the tab identification information of all tabs in the routing tab component and intelligently matching it with the first menu identification information. If the match is successful, the corresponding tab is directly activated, avoiding redundant operations of repeated loading and creation of page instances, thereby effectively improving the page switching speed and response sensitivity. Conversely, if the match fails, a new tab instance is created immediately to ensure the continuity and accuracy of user operations. This technical solution not only optimizes resource allocation, but also significantly enhances the interactive friendliness and overall performance of Web applications, providing solid technical support for building an efficient and smooth Web application experience.

[0069] In some optional implementations of this embodiment, step 203, creating a new tab page instance according to the first menu identification information to obtain the first tab page instance, specifically includes the following steps:

[0070] According to the first menu identification information, obtain tab configuration information, the tab configuration information including interface layout information and control information; according to the interface layout information and control information, create a new tab instance; associate the new tab instance with the first menu identification information to obtain a first tab instance.

[0071] Among them, tab configuration information refers to a collection of configuration parameters required to create or manage tab instances according to preset rules or user customization. Tab configuration information can include interface layout information and control information. Tab configuration information usually comes from the system configuration database or user input, and characterizes the specific display form and functional composition of the tab. This information is used to guide the creation process of the tab instance to ensure that the tab can be presented to the user as expected. For example, a complex tab containing multiple data display areas, its tab configuration information will list in detail the size, position, and required data source of each area.

[0072] Among them, interface layout information refers to the data that defines the spatial arrangement and distribution of elements inside a tab (such as text boxes, buttons, etc.). It mainly comes from the layout design of the designer or the user's custom settings, and represents the overall structure of the tab interface and the relative position relationship between the elements. Interface layout information is used to guide the rendering of the tab interface and ensure that the interface elements can be displayed correctly according to the design requirements. For example, for a tab that contains a title bar, content area, and bottom operation buttons, its interface layout information will specify the specific location and size of these areas.

[0073] Among them, control information refers to the data that describes the properties and behaviors of each control (such as text boxes, drop-down lists, buttons, etc.) inside the tab page. It usually comes from the control library or user-defined configuration, and represents the appearance characteristics (such as color, size), functions (such as click event processing) and the way of interacting with the user of the control. Control information is used to guide the creation and initialization of controls to ensure that the controls can respond to user operations as expected. For example, a tab page with a search function will have a detailed description of the text prompt of the search box, the click event processing function of the search button, etc.

[0074] In one example, the corresponding tab configuration information can be obtained from the server or local database based on the first menu identification information selected by the user (such as "Account Management", "Investment Analysis", etc.). This information includes interface layout information (such as grid layout, list layout) and control information (such as text boxes, buttons, charts, etc.). Based on the obtained interface layout information and control information, a new tab instance is dynamically created using the UI framework. For example, for the "Account Management" menu, a tab containing controls such as an account list and a transaction record is created. The created tab instance is associated with the first menu identification information to form a first tab instance. In this way, when the user clicks the menu again, the corresponding tab can be directly displayed, thereby improving the application's response speed and user experience.

[0075] The embodiment of the present application can achieve a high degree of customization of the application interface by accurately matching the first menu identification information with the tab configuration information. First, the tab configuration containing the interface layout and control information is obtained to ensure that each tab can be accurately constructed according to business needs, thereby improving the professionalism and practicality of the interface. Secondly, dynamically creating a tab instance based on the configuration information not only speeds up the page loading speed, but also enhances the flexibility and scalability of the application, facilitating the iteration and upgrading of subsequent functions. Finally, associating the tab instance with the menu identification information achieves instant response to user operations and interface display, optimizing the user experience.

[0076] In some optional implementations of this embodiment, in step 203, after a new tab page instance is created according to the first menu identification information and the first tab page instance is obtained, the following steps are further included:

[0077] Add the first tab page instance to the queue of the routing tab component; determine the target position of the first tab page instance in the queue of the routing tab component according to the first menu identification information; and update the display state of the routing tab component according to the target position.

[0078] The queue is a sequence used to store tab instances in the routing tab component. Each element in the queue represents a tab instance, which can be arranged in the order in which the user accesses or creates it. The queue can be used to manage the order in which tabs are opened and to quickly switch between them.

[0079] The target position refers to the insertion or display position determined for the first tab instance in the queue of the routing tab component. The position can be determined based on a specific rule of the first menu identification information or user preference.

[0080] The display state refers to the current visualization state of the routing tab component and its queued tab instances, including whether it is visible, activated, highlighted, etc. It represents the current usage and user interaction state of the tab instance. For example, if the user is currently viewing the "Investment Analysis" tab, the display state of the tab is activated and highlighted, while other tabs may be inactive or hidden.

[0081] In one example, in a financial service platform, when a user clicks on the "financial products" menu item, the system receives the first trigger instruction of the first menu tab. From the trigger instruction, "financial products" is parsed as the first menu identification information. Next, the system determines whether a tab page instance corresponding to "financial products" already exists in the current routing tab component. If not, the system creates a new tab page instance, namely the first tab page instance, based on the menu identification information of "financial products", and adds it to the queue of the routing tab component. After adding the new tab page instance, the system needs to determine the target position of the instance in the queue. In this example, in order to optimize the user experience, the system can place the "financial products" tab page instance at the front of the queue according to the user's usage habits or importance sorting. Finally, based on the determined target position, the display status of the routing tab component is updated so that the user can immediately see and access the "financial products" page.

[0082] The embodiment of the present application can achieve dynamic management and efficient organization of page instances by accurately adding the first tab instance to the queue of the routing tab component. The target position of the newly created tab instance in the queue is determined based on the first menu identification information. This design not only maintains the logical order of page access, but also allows the system to intelligently sort pages according to menu levels or user preferences, enhancing the consistency and personalization of the user experience. The display status of the routing tab component is updated according to the determined target position to immediately reflect the user's navigation selection, so that the user can intuitively see the page tabs that are currently activated or about to be visited, effectively reducing the complexity of the operation.

[0083] In some optional implementations of this embodiment, in step S202, after determining whether there is a tab page instance corresponding to the first menu tab in the routing tab component based on the first menu identification information, the following steps are also included:

[0084] If there is a tab page instance corresponding to the first menu tab in the routing tab component, obtain the routing jump operation information recorded by the history proxy middleware; determine the tab page instance corresponding to the first menu tab as the second tab page instance; based on the routing jump operation information, activate the second tab page instance to obtain the activated second tab page instance; obtain the second page content of the tab page corresponding to the activated second tab page instance, and render and display the second page content through the routing tab component.

[0085] The route jump operation information includes, but is not limited to, the jump source page, the target page path, the jump trigger event type (such as click, timed jump, etc.), the parameters and status carried, etc. It represents the history and path of navigation between pages, and is used to achieve accurate page navigation, state recovery, and user behavior analysis. For example, in a SPA (single-page application), when a user clicks to jump from the "home page" to the "product details page", the "route jump operation information" will record this behavior, including that the source page is the "home page", the target page path is " / product / 123", and parameters such as the product ID that may be carried.

[0086] The second page content may include text, pictures, videos, form elements, dynamic data and other content on the tab page corresponding to the activated second tab page instance, which together constitute the page presentation visible to the user. It represents all the visual and interactive elements displayed to the user at a specific moment, and is used to realize the transmission of information, the response to user interaction and the display of business logic. For example, in the "product details page" of an e-commerce website, the "second page content" may include the name, picture, price, inventory, user evaluation and other information of the product. After the information is redirected through the route, it is rendered and displayed to the user by the corresponding page component.

[0087] In one example, when a user clicks on the "Product List" menu tab on the SPA interface, the system receives a trigger instruction. The instruction contains a unique menu identification information, such as "menu-product-list". The system first parses the instruction and extracts the menu identification. Next, the system checks whether a tab page instance corresponding to "menu-product-list" already exists in the routing tab component (such as RouterTab). If so, it means that the user has visited the page before, and the page instance may still be retained in memory. If the tab page instance exists, the system obtains the routing jump operation information related to the tab page instance through the history proxy middleware. This information may include the status of the user's last visit to the page, the parameters carried, etc. Then, the system activates the tab page instance based on this information, that is, sets it as the currently displayed page. After activating the tab page instance, the system obtains the corresponding second page content. This content may include the latest list of products, price change information, etc. Finally, the page content is rendered to the screen through the routing tab component and presented to the user.

[0088] The embodiment of the present application can realize the reuse and state management of page instances by introducing the routing tab component and the history proxy middleware, thereby improving the page loading speed and user experience. At the same time, the solution also retains all the functions of the native History and ensures the independence of jump records between different modules.

[0089] In some optional implementations of this embodiment, in step S205, after activating the first tab page instance, obtaining the first page content of the tab page corresponding to the activated first tab page instance, and rendering and displaying the first page content through the routing tab component, the following steps are also included:

[0090] When the second trigger instruction of the second menu tab is monitored, the second menu identification information is parsed from the second trigger instruction; according to the second menu identification information, the tab instance corresponding to the second menu tab is searched in the routing tab component; if the tab instance corresponding to the second menu tab is found, the tab instance corresponding to the second menu tab is determined as the third tab instance, and the status information of the third tab instance is obtained through the history proxy middleware; according to the status information, the currently activated tab instance is set to an inactive state, and the third tab instance is set to an activated state; the third page content of the tab of the activated third tab instance is obtained, and the third page content is rendered and displayed through the routing tab component.

[0091] The second menu tab refers to an interactive element on the user interface that is used to represent different functional areas or content pages. It is a specific item in multiple menu tabs. These menu tabs are usually arranged in the sidebar or top navigation bar of the interface. Users can switch the displayed content by clicking or selecting different menu tabs. For example, in a web application, there may be multiple menu tabs arranged on the left side of the user interface, among which the "Message Center" is the "second menu tab". After the user clicks it, it switches to the message viewing page.

[0092] The second trigger instruction refers to a signal or instruction generated by the user interface or operating system when the user triggers the "second menu tab" by clicking, touching or other interactive methods. For example, when the user clicks the "Message Center" menu tab, the system will generate a trigger instruction containing the "Message Center" logo, namely the "second trigger instruction".

[0093] The second menu identification information refers to the information parsed from the "second trigger instruction" and used to uniquely identify the "second menu tab". This information is usually a string or a numeric code, which is used to find the tab instance corresponding to the specific menu tab within the application. For example, in the trigger instruction of the "Message Center" menu tab, the parsed "Message Center" string is the "second menu identification information".

[0094] The state information refers to various state data related to the "third tab page instance", including but not limited to page content, user input, page scrolling position, etc. This information is used to restore the previous state of the tab page when the user revisits it. For example, if a user reads a message on the "Message Center" page and then leaves, the reading state, scrolling position, and other information of the page are "state information".

[0095] The "deactivated state" refers to the state where the tab instance is no longer activated or displayed in the current user interface. When a tab instance is switched to the "deactivated state", its page content will no longer be displayed in the user interface.

[0096] The "active state" refers to the state in which the tab instance is activated or displayed in the current user interface. When a tab instance is switched to the "active state", its page content will be displayed in the user interface and can accept user interaction. For example, when a user clicks the "Message Center" menu tab, the "Message Center" page enters the "active state" and is displayed to the user.

[0097] In one example, an online document editing software with multiple menu tabs is taken as an example. When the user operates on the interface of the software and listens to the second trigger instruction (such as a mouse click or a keyboard shortcut) of the second menu tab (such as the "Settings" tab), the system first parses the instruction to obtain the second menu identification information, that is, the unique identifier of the "Settings" tab. Subsequently, all opened tab instances are traversed in the routing tab component to find the tab instance corresponding to the "Settings" tab. If found, it is determined to be the third tab instance. Through the history proxy middleware, the system obtains the status information of the third tab instance, including whether it has been modified, the current scroll position, etc. Based on this information, the system sets the currently activated tab instance (such as the "Document Editing" tab) to an inactive state and activates the third tab instance at the same time. After that, the system loads and obtains the third page content of its tab (such as the various configuration options of the settings page) from the third tab instance, and finally renders and displays these contents through the routing tab component.

[0098] The embodiment of the present application can achieve instant response to the user's operation intention through a refined instruction monitoring and parsing mechanism. When the user triggers the second menu tab, the corresponding menu identifier can be quickly parsed, and then the previously created tab instance can be accurately located in the routing tab component. This design not only optimizes resource usage and avoids unnecessary page reconstruction, but also significantly improves the fluency of user experience. By obtaining and applying the status information of the tab instance through the history record proxy middleware, the page life cycle can be managed intelligently, such as smoothly transitioning the currently activated tab instance to an inactive state, and activating the third tab instance at the same time, ensuring the consistency and coherence of page switching. Finally, the routing tab component efficiently renders and displays the latest content of the target page, allowing users to seamlessly connect to the required information interface, and the entire operation process is quick and intuitive.

[0099] In some optional implementations of this embodiment, after the step of "searching for a tab page instance corresponding to the second menu tab in the routing tab component according to the second menu identification information", the following steps are also included:

[0100] If the tab instance corresponding to the second menu tab is not found, a tab instance corresponding to the second menu tab is created based on the second menu identification information to obtain a fourth tab instance; through the history proxy middleware, the browser history navigation behavior under the fourth tab instance is monitored and recorded, and the fourth tab instance is set to an activated state; the fourth page content of the tab of the activated fourth tab instance is obtained, and the fourth page content is rendered and displayed through the routing tab component.

[0101] In one example, when the second menu tab on the user operation interface receives a second trigger instruction in the form of a user's click or touch, the instruction is first parsed to extract the second menu identification information representing a specific function, such as "user details". Subsequently, the currently opened tab instance set, that is, the routing tab component, is traversed to find whether there is a tab instance matching the "user details". If the search result is empty, that is, no matching tab instance is found, a new tab instance is dynamically created based on the identification information of "user details", which is called the fourth tab instance. This process ensures that every time the user accesses an unopened menu item, a new browsing environment for the function is obtained. Next, through the integrated history proxy middleware, all browser history navigation behaviors in the fourth tab instance, such as forward, backward or refresh, are monitored and recorded to ensure that the user can browse different pages smoothly in the tab without losing the navigation history. At the same time, the newly created fourth tab instance is set to an activated state, making it the focus of the current user interaction. Finally, the page content currently loaded by the fourth tab instance is obtained, that is, the specific information of the "User Details" page, and these contents are displayed to the user in a visual form through the rendering mechanism of the routing tab component.

[0102] In the embodiment of the present application, when the system fails to retrieve a tab page instance that matches the second menu tab from the routing tab component, a new tab page instance, i.e., the fourth tab page instance, is dynamically constructed based on the second menu identification information, thereby ensuring that the user can seamlessly access the required content and improving the consistency and convenience of the user experience. Next, by introducing the history record proxy middleware, the detailed monitoring and accurate recording of all browser historical navigation behaviors under the fourth tab page instance are achieved. This function not only enhances the interactive logic of the application, but also provides users with a reliable navigation backtracking capability, making it easy to locate previous pages in a complex browsing environment. Finally, the newly created fourth tab page instance is set to an activated state, and its page content is immediately obtained, and quickly rendered and displayed to the user through the routing tab component. This series of operations not only optimizes the response speed of the application, but also ensures the immediacy and accuracy of the page content, enabling users to obtain the required information immediately, further improving the overall user satisfaction and work efficiency.

[0103] It should be emphasized that in order to further ensure the privacy and security of the above-mentioned first menu identification information and the second menu identification information, the above-mentioned first menu identification information and the second menu identification information can also be stored in a node of a blockchain.

[0104] The blockchain referred to in this application is a new application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanism, encryption algorithm, etc. Blockchain is essentially a decentralized database, a string of data blocks generated by cryptographic methods. Each data block contains a batch of network transaction information, which is used to verify the validity of its information (anti-counterfeiting) and generate the next block. Blockchain can include the underlying blockchain platform, platform product service layer, and application service layer.

[0105] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0106] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0107] Further references Figure 3 , as a response to the above Figure 2 The present application provides an embodiment of a page management device, and the embodiment of the device is Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0108] like Figure 3 As shown, the page management device 400 of this embodiment includes: a receiving module 401 , a judging module 402 , a first creating module 403 , a recording module 404 and an activating module 405 .

[0109] in:

[0110] The receiving module 401 is used to receive a first trigger instruction of a first menu tab, and parse the first menu identification information from the first trigger instruction;

[0111] A determination module 402 is used to determine whether there is a tab page instance corresponding to the first menu tab in the routing tab component based on the first menu identification information;

[0112] The first creation module 403 is used to create a new tab page instance according to the first menu identification information to obtain the first tab page instance if the tab page instance corresponding to the first menu tab does not exist in the routing tab component;

[0113] The recording module 404 is used to monitor and record the browser history navigation behavior under the first tab page instance through a preset history record proxy middleware;

[0114] The activation module 405 is used to activate the first tab page instance, obtain the first page content of the tab page corresponding to the activated first tab page instance, and render and display the first page content through the routing tab component.

[0115] The embodiment of the present application can significantly optimize the user experience in the complex module jump scenario in the SPA project by introducing the routing tab component and the preset history proxy middleware. Specifically, when the trigger instruction of the first menu tab is received, the corresponding menu identification information can be accurately parsed, and the corresponding tab page instance can be intelligently judged whether there is a corresponding tab page instance in the routing tab component. If not, a new tab page instance is created immediately to ensure that the page requested by the user is responded to quickly. More importantly, through the monitoring and recording functions of the history proxy middleware, this solution can accurately capture and manage the browser history navigation behavior under each tab page instance. This design effectively avoids the problem of interpenetration of different module jump records in the browser's native History stack, so that the history records under each tab page remain independent and clear. When a user activates a tab page instance, the corresponding page content can be quickly obtained and rendered, and seamless display can be achieved through the routing tab component. This process not only ensures the continuity of user operations, but also significantly improves the operating experience and office efficiency, so that the SPA project can also show excellent interactive performance in complex module jump scenarios and improve the efficiency of page management.

[0116] In one embodiment, the determination module 402 includes:

[0117] A first acquisition submodule is used to acquire the tab identification information of all tabs in the routing tab component, and match the first menu identification information with the tab identification information;

[0118] A first determination submodule, configured to determine whether a tab page instance corresponding to the first menu tab exists in the routing tab component if the first menu identification information matches the tab identification information;

[0119] The second determination submodule is used to determine that there is no tab page instance corresponding to the first menu tab in the routing tab component if the first menu identification information does not match the tab identification information.

[0120] The embodiment of the present application can quickly determine the existence status of the tab instance corresponding to the first menu tab by accurately obtaining the tab identification information of all tabs in the routing tab component and intelligently matching it with the first menu identification information. If the match is successful, the corresponding tab is directly activated, avoiding redundant operations of repeated loading and creation of page instances, thereby effectively improving the page switching speed and response sensitivity. Conversely, if the match fails, a new tab instance is created immediately to ensure the continuity and accuracy of user operations. This technical solution not only optimizes resource allocation, but also significantly enhances the interactive friendliness and overall performance of Web applications, providing solid technical support for building an efficient and smooth Web application experience.

[0121] In one embodiment, the first creation module 403 includes:

[0122] A second acquisition submodule is used to acquire tab configuration information according to the first menu identification information, where the tab configuration information includes interface layout information and control information;

[0123] Create a submodule to create a new tab instance based on the interface layout information and control information;

[0124] The associating submodule is used to associate the new tab page instance with the first menu identification information to obtain the first tab page instance.

[0125] The embodiment of the present application can achieve a high degree of customization of the application interface by accurately matching the first menu identification information with the tab configuration information. First, the tab configuration containing the interface layout and control information is obtained to ensure that each tab can be accurately constructed according to business needs, thereby improving the professionalism and practicality of the interface. Secondly, dynamically creating a tab instance based on the configuration information not only speeds up the page loading speed, but also enhances the flexibility and scalability of the application, facilitating the iteration and upgrading of subsequent functions. Finally, associating the tab instance with the menu identification information achieves instant response to user operations and interface display, optimizing the user experience.

[0126] In one embodiment, the page management device 400 further includes:

[0127] Add a module for adding the first tab page instance to the queue of the routing tab component;

[0128] A first determination module, configured to determine a target position of the first tab page instance in a queue of the routing tab component according to the first menu identification information;

[0129] An update module is used to update the display status of the routing tab component according to the target position. The embodiment of the present application can realize dynamic management and efficient organization of page instances by accurately adding the first tab instance to the queue of the routing tab component. The target position of the newly created tab instance in the queue is determined based on the first menu identification information. This design not only maintains the logical order of page access, but also allows the system to intelligently sort pages according to menu levels or user preferences, thereby enhancing the consistency and personalization of the user experience. The display status of the routing tab component is updated according to the determined target position to immediately reflect the user's navigation selection, so that the user can intuitively see the page tabs that are currently activated or about to be visited, effectively reducing the complexity of the operation.

[0130] In one embodiment, the page management device 400 further includes:

[0131] A first acquisition module is used to acquire the route jump operation information recorded by the history record proxy middleware if there is a tab page instance corresponding to the first menu tab in the route tab component;

[0132] A second determining module, used to determine the tab page instance corresponding to the first menu tab as the second tab page instance;

[0133] An activation module, used to activate the second tab page instance based on the route jump operation information, and obtain the activated second tab page instance;

[0134] The first display module is used to obtain the second page content of the tab page corresponding to the activated second tab page instance, and render and display the second page content through the routing tab component.

[0135] The embodiment of the present application can realize the reuse and state management of page instances by introducing the routing page tab component and the history record proxy middleware, thereby improving the page loading speed and user experience. At the same time, the solution also retains all the functions of the native History and ensures the independence of jump records between different modules.

[0136] In one embodiment, the page management device 400 further includes:

[0137] A monitoring module, configured to parse the second menu identification information from the second trigger instruction when monitoring the second trigger instruction of the second menu tab;

[0138] A search module, used to search for a tab page instance corresponding to the second menu tab in the routing tab component according to the second menu identification information;

[0139] A second acquisition module is used to determine the tab page instance corresponding to the second menu tab as the third tab page instance if the tab page instance corresponding to the second menu tab is found, and obtain the status information of the third tab page instance through the history record proxy middleware;

[0140] A setting module, used to set the currently activated tab page instance to a deactivated state and set the third tab page instance to an activated state according to the state information;

[0141] The second display module is used to obtain the third page content of the tab page of the activated third tab page instance, and render and display the third page content through the routing tab component.

[0142] The embodiment of the present application can achieve instant response to the user's operation intention through a refined instruction monitoring and parsing mechanism. When the user triggers the second menu tab, the corresponding menu identifier can be quickly parsed, and then the previously created tab instance can be accurately located in the routing tab component. This design not only optimizes resource usage and avoids unnecessary page reconstruction, but also significantly improves the fluency of user experience. By obtaining and applying the status information of the tab instance through the history record proxy middleware, the page life cycle can be managed intelligently, such as smoothly transitioning the currently activated tab instance to an inactive state, and activating the third tab instance at the same time, ensuring the consistency and coherence of page switching. Finally, the routing tab component efficiently renders and displays the latest content of the target page, allowing users to seamlessly connect to the required information interface, and the entire operation process is quick and intuitive.

[0143] In one embodiment, the page management device 400 further includes:

[0144] A second creation module, configured to create a tab page instance corresponding to the second menu tab based on the second menu identification information if the tab page instance corresponding to the second menu tab is not found, to obtain a fourth tab page instance;

[0145] A recording module, used for monitoring and recording the browser history navigation behavior under the fourth tab page instance through the history record proxy middleware, and setting the fourth tab page instance to an activated state;

[0146] The third acquisition module is used to obtain the fourth page content of the tab page of the fourth tab page instance in the activated state, and render and display the fourth page content through the routing tab component.

[0147] In the embodiment of the present application, when the system fails to retrieve a tab page instance that matches the second menu tab from the routing tab component, a new tab page instance, i.e., the fourth tab page instance, is dynamically constructed based on the second menu identification information, thereby ensuring that the user can seamlessly access the required content and improving the consistency and convenience of the user experience. Next, by introducing the history record proxy middleware, the detailed monitoring and accurate recording of all browser historical navigation behaviors under the fourth tab page instance are achieved. This function not only enhances the interactive logic of the application, but also provides users with a reliable navigation backtracking capability, making it easy to locate previous pages in a complex browsing environment. Finally, the newly created fourth tab page instance is set to an activated state, and its page content is immediately obtained, and quickly rendered and displayed to the user through the routing tab component. This series of operations not only optimizes the response speed of the application, but also ensures the immediacy and accuracy of the page content, enabling users to obtain the required information immediately, further improving the overall user satisfaction and work efficiency.

[0148] To solve the above technical problems, the present application also provides a computer device. Figure 4 , Figure 4 This is a basic structural block diagram of the computer device in this embodiment.

[0149] The computer device 6 includes a memory 61, a processor 62, and a network interface 63 that are interconnected and communicated through a system bus. It should be noted that the figure only shows a computer device 6 having a memory 61, a processor 62, and a network interface 63, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (ASIC), programmable gate arrays (FPGA), digital signal processors (DSP), embedded devices, etc.

[0150] Computer devices can be computing devices such as desktop computers, notebooks, PDAs, and cloud servers. Computer devices can interact with users through keyboards, mice, remote controls, touch pads, or voice control devices.

[0151] The memory 61 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 61 can be an internal storage unit of the computer device 6, such as a hard disk or memory of the computer device 6. In other embodiments, the memory 61 can also be an external storage device of the computer device 6, such as a plug-in hard disk equipped on the computer device 6, a smart memory card (SmartMedia Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. Of course, the memory 61 can also include both the internal storage unit of the computer device 6 and its external storage device. In this embodiment, the memory 61 is generally used to store the operating system and various application software installed on the computer device 6, such as computer-readable instructions of the page management method, etc. In addition, the memory 61 can also be used to temporarily store various types of data that have been output or are to be output.

[0152] The processor 62 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 62 is generally used to control the overall operation of the computer device 6. In this embodiment, the processor 62 is used to run computer-readable instructions stored in the memory 61 or process data, such as computer-readable instructions for running a page management method.

[0153] The network interface 63 may include a wireless network interface or a wired network interface, and the network interface 63 is generally used to establish a communication connection between the computer device 6 and other electronic devices.

[0154] The embodiment of the present application can significantly optimize the user experience in the complex module jump scenario in the SPA project by introducing the routing tab component and the preset history proxy middleware. Specifically, when the trigger instruction of the first menu tab is received, the corresponding menu identification information can be accurately parsed, and the corresponding tab page instance can be intelligently judged whether there is a corresponding tab page instance in the routing tab component. If not, a new tab page instance is created immediately to ensure that the page requested by the user is responded to quickly. More importantly, through the monitoring and recording functions of the history proxy middleware, this solution can accurately capture and manage the browser history navigation behavior under each tab page instance. This design effectively avoids the problem of interpenetration of different module jump records in the browser's native History stack, so that the history records under each tab page remain independent and clear. When a user activates a tab page instance, the corresponding page content can be quickly obtained and rendered, and seamless display can be achieved through the routing tab component. This process not only ensures the continuity of user operations, but also significantly improves the operating experience and office efficiency, so that the SPA project can also show excellent interactive performance in complex module jump scenarios and improve the efficiency of page management.

[0155] The present application also provides another implementation, namely, providing a computer-readable storage medium, which stores computer-readable instructions. The computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the page management method as described above.

[0156] The embodiment of the present application can significantly optimize the user experience in the complex module jump scenario in the SPA project by introducing the routing tab component and the preset history proxy middleware. Specifically, when the trigger instruction of the first menu tab is received, the corresponding menu identification information can be accurately parsed, and the corresponding tab page instance can be intelligently judged whether there is a corresponding tab page instance in the routing tab component. If not, a new tab page instance is created immediately to ensure that the page requested by the user is responded to quickly. More importantly, through the monitoring and recording functions of the history proxy middleware, this solution can accurately capture and manage the browser history navigation behavior under each tab page instance. This design effectively avoids the problem of interpenetration of different module jump records in the browser's native History stack, so that the history records under each tab page remain independent and clear. When a user activates a tab page instance, the corresponding page content can be quickly obtained and rendered, and seamless display can be achieved through the routing tab component. This process not only ensures the continuity of user operations, but also significantly improves the operating experience and office efficiency, so that the SPA project can also show excellent interactive performance in complex module jump scenarios and improve the efficiency of page management.

[0157] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods of each embodiment of the present application.

[0158] Obviously, the embodiments described above are only some embodiments of the present application, rather than all embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application is described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific implementation methods, or to perform equivalent replacement of some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of this application, directly or indirectly used in other related technical fields, is similarly within the scope of patent protection of this application.

Claims

1. A page management method, characterized in that: The steps include: Receiving a first trigger instruction of a first menu tab, and parsing first menu identification information from the first trigger instruction; Based on the first menu identification information, determining whether there is a tab page instance corresponding to the first menu tab in the routing tab component; If the tab page instance corresponding to the first menu tab does not exist in the routing tab component, create a new tab page instance according to the first menu identification information to obtain a first tab page instance; Monitor and record the browser history navigation behavior under the first tab page instance through the preset history record proxy middleware; Activate the first tab page instance, obtain the first page content of the tab page corresponding to the activated first tab page instance, and render and display the first page content through the routing tab component.

2. The method according to claim 1, characterized in that The step of determining whether there is a tab page instance corresponding to the first menu tab in the routing tab component based on the first menu identification information specifically includes: Obtaining the page identification information of all the page tabs in the routing page tab component, and matching the first menu identification information with the page identification information; If the first menu identification information matches the page tab identification information, determining that a tab page instance corresponding to the first menu page tab exists in the routing page tab component; If the first menu identification information does not match the page tab identification information, it is determined that there is no tab page instance corresponding to the first menu tab in the routing page tab component.

3. The method according to claim 1, characterized in that The step of creating a new tab page instance according to the first menu identification information to obtain the first tab page instance specifically includes: According to the first menu identification information, obtain tab page configuration information, wherein the tab page configuration information includes interface layout information and control information; Creating a new tab page instance according to the interface layout information and the control information; The new tab page instance is associated with the first menu identification information to obtain a first tab page instance.

4. The method according to claim 3, characterized in that After the step of creating a new tab page instance according to the first menu identification information to obtain the first tab page instance, the method further includes: Adding the first tab page instance to the queue of the routing tab component; Determine, according to the first menu identification information, a target position of the first tab page instance in a queue of the routing tab component; According to the target location, the display status of the routing tab component is updated.

5. The method according to claim 1, characterized in that After the step of determining whether there is a tab page instance corresponding to the first menu tab in the routing tab component based on the first menu identification information, the method further includes: If a tab page instance corresponding to the first menu tab exists in the routing tab component, obtaining the routing jump operation information recorded by the history record proxy middleware; Determine the tab page instance corresponding to the first menu tab as the second tab page instance; Based on the route jump operation information, activate the second tab page instance to obtain the activated second tab page instance; The second page content of the tab page corresponding to the activated second tab page instance is obtained, and the second page content is rendered and displayed through the routing tab component.

6. The method according to claim 1, characterized in that After the steps of activating the first tab page instance, obtaining the first page content of the tab page corresponding to the activated first tab page instance, and rendering and displaying the first page content by the routing tab component, the method further includes: When a second trigger instruction of the second menu tab is monitored, the second menu identification information is parsed from the second trigger instruction; According to the second menu identification information, searching for a tab page instance corresponding to the second menu tab in the routing tab component; If a tab page instance corresponding to the second menu tab is found, the tab page instance corresponding to the second menu tab is determined as a third tab page instance, and the status information of the third tab page instance is obtained through the history record proxy middleware; According to the state information, setting the currently activated tab page instance to a deactivated state and setting the third tab page instance to an activated state; The third page content of the tab page of the third tab page instance in the activated state is obtained, and the third page content is rendered and displayed through the routing tab component.

7. The method according to claim 6, characterized in that After the step of searching the routing tab component for a tab page instance corresponding to the second menu tab according to the second menu identification information, the method further includes: If the tab page instance corresponding to the second menu tab is not found, creating a tab page instance corresponding to the second menu tab based on the second menu identification information to obtain a fourth tab page instance; By means of the history record proxy middleware, the browser history navigation behavior under the fourth tab page instance is monitored and recorded, and the fourth tab page instance is set to an activated state; The fourth page content of the tab page of the fourth tab page instance in the activated state is obtained, and the fourth page content is rendered and displayed through the routing tab component.

8. A page management device, characterized in that: include: A receiving module, configured to receive a first trigger instruction of a first menu tab, and parse the first menu identification information from the first trigger instruction; A judgment module, used for judging whether there is a tab page instance corresponding to the first menu tab in the routing tab component based on the first menu identification information; A first creation module, configured to create a new tab page instance according to the first menu identification information to obtain a first tab page instance if the tab page instance corresponding to the first menu tab does not exist in the routing tab component; A recording module, used to monitor and record the browser history navigation behavior under the first tab page instance through a preset history record proxy middleware; An activation module is used to activate the first tab page instance, obtain the first page content of the tab page corresponding to the activated first tab page instance, and render and display the first page content through the routing tab component.

9. A computer device, characterized in that: The method comprises a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the page management method according to any one of claims 1 to 7 when executing the computer-readable instructions.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the page management method according to any one of claims 1 to 7 are implemented.

Images