Multi-tab page cache management method and device based on Vue framework

Abstract

The invention provides a multi-tab page cache management method and device based on a Vue framework, equipment and a storage medium, and relates to the technical field of Web front-end development. A flexible and efficient multi-tab cache management system is realized by combining a kep-alive component of Vue and a Vuex state management module. The system can customize the cache strategy according to the service demand, effectively manage the cache resources, and improve the performance of the application and the user experience.

Description

Technical Field

[0001] This application relates to the technical field of Web front-end development, and particularly to a multi-tab page cache management method, device, equipment and storage medium based on the Vue framework. Background Art

[0002] In modern Web applications, especially when building complex back-end management systems, improving user experience and application response speed has become the focus of developers. To achieve this goal, the multi-tab function has emerged, which allows users to freely switch between different tabs, thus improving work efficiency. In back-end management systems, imitating the multi-tab switching function of browsers has become a common design pattern. This design enables users to quickly switch between multiple open tabs, facilitating access and management of different menu interfaces. However, with the increase in application complexity, traditional cache management technologies have become difficult to meet the requirements in multi-tab scenarios.

[0003] Traditional cache management technologies often have the following problems: Firstly, cache management is inflexible and cannot be dynamically adjusted according to business requirements; Secondly, the cache strategy is single and cannot adapt to different usage scenarios; Finally, traditional cache technologies cannot effectively manage caches in multi-tab scenarios to ensure that users can quickly resume their previous states when switching tabs while avoiding unnecessary resource consumption. Especially in the scenario of jumping from a list page to a detail page, users usually expect to see the latest detail content each time instead of the previously opened page. However, traditional cache management technologies cannot provide such customized cache strategies, resulting in a decline in user experience. Summary of the Invention

[0004] In view of the above problems, this application provides a multi-tab page cache management method and device based on the Vue framework, including the following:

[0005] In a first aspect, this application provides a multi-tab page cache management method based on the Vue framework, and the method includes:

[0006] Using the keep-alive component to wrap the route view component, and pre-defining the route name as the key value based on the business page name to ensure global uniqueness; setting a cache identifier in the route meta information;

[0007] Defining a multi-tab page state in the state management module, where the multi-tab page state includes a set of opened tabs and a set of cached tabs;

[0008] Defining an include attribute on the keep-alive component and binding the include attribute to the value of the set of cached tabs;

[0009] Bind the rendering data of the project tab page to the value of the opened tab page set.

[0010] Optionally, when opening a new tab page, the method further includes:

[0011] Obtain the routing information in the new tab page;

[0012] Add the route name in the routing information of the new tab page to the opened tab page set;

[0013] Judge whether caching is required according to the cache identifier in the routing meta-information. If the identifier indicates that caching is required, add the corresponding route name to the cached tab page set.

[0014] Optionally, when switching between multiple tab pages, the method further includes:

[0015] Judge whether the route name corresponding to the tab page to be switched is in the cached tab page set;

[0016] If it is in the cached tab page set, retain the previously visited state for switching;

[0017] If it is not in the cached tab page set, reload the corresponding page.

[0018] Optionally, when closing a specific tab page, the method further includes:

[0019] Obtain the routing information of the tab page to be closed;

[0020] Remove the route page name of the tab page to be closed from the opened tab page set;

[0021] If the route page name of the tab page to be closed is in the cached tab page set, remove the page name from the cached tab page set;

[0022] If the closed tab page is the currently opened tab page, automatically switch to the tab page corresponding to the last route name in the opened tab page set.

[0023] Optionally, when refreshing a tab page, the method further includes:

[0024] Remove the route page name corresponding to the tab page from the cached tab page set;

[0025] Retain the full path of the current tab page, perform route redirection and pass the full path to a dedicated redirection page;

[0026] The redirect page accepts the full path and redirects back to the refreshed tab page;

[0027] If the cache identifier corresponding to the tab page is marked as needing to be cached, add the corresponding route name back to the set of cached tab pages.

[0028] Optionally, when clicking on a specific item in a list-type tab page to jump to the corresponding details tab page, the method further includes:

[0029] Call the multi-tab module method to remove the route page name corresponding to the details tab page from the set of cached tab pages;

[0030] Execute the route jump method to clear the original details page cache and reset the entire page state.

[0031] Optionally, the set of opened tab pages is cached using a persistent storage plugin to restore the previous tab page state when the user revisits.

[0032] In a second aspect, the present application provides a multi-tab page cache management device based on the Vue framework. The device includes:

[0033] A route view wrapping module for wrapping the route view component with the keep-alive component and pre-defining the route name as the key value based on the business page name to ensure global uniqueness; setting the cache identifier in the route meta information;

[0034] A multi-tab page state management module for defining the multi-tab page state in the state management module, where the multi-tab page state includes the set of opened tab pages and the set of cached tab pages;

[0035] A component configuration module for defining the include attribute on the keep-alive component and binding the include attribute to the value of the set of cached tab pages;

[0036] A project tab page rendering module for binding the rendering data of the project tab page to the value of the set of opened tab pages.

[0037] Optionally, the device further includes: a new tab page opening module for, when opening a new tab page, obtaining the route information in the new tab page, adding the route name in the route information of the new tab page to the set of opened tab pages, and determining whether to cache according to the cache identifier in the route meta information. If the identifier indicates a need to cache, add the corresponding route name to the set of cached tab pages.

[0038] Optionally, the device further includes: a tab page switching module, configured to, when switching between multiple tab pages, determine whether the route name corresponding to the tab page to be switched is in the set of cached tab pages. If it is in the set of cached tab pages, the previous access state is retained for switching. If it is not in the set of cached tab pages, the corresponding page is reloaded.

[0039] Optionally, the device further includes: a tab page closing module, configured to, when closing a specific tab page, obtain the route information of the tab page to be closed, and remove the route page name of the tab page to be closed from the set of opened tab pages. If the route page name of the tab page to be closed is in the set of cached tab pages, the page name is removed from the set of cached tab pages. If the closed tab page is the currently opened tab page, it is automatically switched to the tab page corresponding to the last route name in the set of opened tab pages.

[0040] Optionally, the device further includes: a tab page refreshing module, configured to, when refreshing a tab page, remove the route page name corresponding to the tab page from the set of cached tab pages, retain the complete path of the current tab page, perform route redirection and pass the complete path to a dedicated redirection page. The redirection page accepts the complete path and redirects back to the refreshed tab page. If the cache identifier corresponding to the tab page is set to be cached, its corresponding route name is added back to the set of cached tab pages.

[0041] Optionally, the device further includes: a detail page jumping module, configured to, when clicking a specific item on a list - type tab page to jump to the corresponding detail tab page, call the multi - tab module method to remove the route page name corresponding to the detail tab page from the set of cached tab pages, execute the route jumping method, clear the original detail page cache and reset the entire page state.

[0042] In a third aspect, the present application provides a device, which includes a memory and a processor. The memory is used to store instructions or code, and the processor is used to execute the instructions or code so that the device executes the multi - tab page cache management method based on the Vue framework described in any implementation manner of the foregoing first aspect.

[0043] In a fourth aspect, the present application provides a computer - readable storage medium, in which code is stored. When the code is run, the device running the code implements the multi - tab page cache management method based on the Vue framework described in any implementation manner of the foregoing first aspect.

[0044] This application provides a multi-tab page cache management method based on the Vue framework. By precisely controlling page caching, when users switch between different tabs, they can quickly resume the previous state without reloading the page, thus improving the application's response speed and user experience. According to the cache identifier in the route meta information, it can intelligently select the pages that need to be cached, avoiding unnecessary resource consumption. At the same time, through the persistent storage plugin, the set of opened tabs is cached, and users can quickly restore the previous tab state when accessing again, further enhancing the resource utilization efficiency. In addition, this method allows developers to customize the cache policy according to business requirements, such as dynamically adjusting the cache policy based on factors such as page type and user behavior, thereby enhancing the flexibility and adaptability of cache management. Through the multi-tab state defined in the state management module, including the set of opened tabs and the set of cached tabs, it effectively supports cache management in the multi-tab scenario. This enables users to freely switch between multiple tabs while maintaining the state and cache information of each tab. Finally, the rendering data of the project tabs is bound to the value of the set of opened tabs, enabling the display of the tabs to reflect the current state of the tabs opened by the user in real time. This not only improves the interactivity of the application but also makes it more convenient for users to manage and switch tabs.

[0045] In summary, through technical means such as combining the keep-alive component, route meta information, state management module, and persistent storage plugin, this technical solution realizes efficient cache management in the multi-tab scenario, significantly improving the user experience and resource utilization efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] To more clearly illustrate the technical solutions in the embodiments or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the drawings in the following description are only some embodiments of this application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0047] Figure 1 It is a flowchart of a multi-tab page cache management method based on the Vue framework provided by an embodiment of this application;

[0048] Figure 2 It is a schematic structural diagram of a multi-tab page cache management device provided by an embodiment of this application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0049] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions in the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of this application. Apparently, 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 creative efforts shall fall within the scope of protection of this application.

[0050] Figure 1 This is a flowchart of a multi-tab page cache management method based on the Vue framework provided by the embodiments of this application. In combination with Figure 1 As shown, the multi-tab page cache management method based on the Vue framework provided by the embodiments of this application may include:

[0051] S101. Use the keep-alive component to wrap the route view component, and pre-define the route name as the key value based on the business page name to ensure global uniqueness; set the cache identifier in the route meta information.

[0052] The multi-tab page cache management method based on the Vue framework in the embodiments of this application is based on a project that has been built using Vue-cli (the official scaffolding tool for Vue). This project not only has the basic Vue project structure set up, but also includes a state management module (such as Vuex) and business pages.

[0053] In a Vue project, the state management module usually refers to Vuex. Vuex is a state management pattern and library developed specifically for Vue.js applications. It centrally stores and manages the states of all components of the application and ensures that the states change in a predictable manner according to corresponding rules. The project in the embodiments of this application has integrated Vuex or a similar state management library. Business pages refer to the actual functional pages in the project, such as the login page, home page, product list page, etc. These pages usually contain the core business logic and UI display of the project. Here it is stated that the project already includes some business pages, that is, a part of the functions have been developed.

[0054] Based on this, first, the identification and configuration of the tab pages are carried out so that each tab page has an actual name, which is unique and used to identify different tab pages. And each tab page also has a cache configuration, which determines whether the tab page needs to be cached.

[0055] Specifically, in the Vue project, use <keep-alive>Component wraps the route view component( <router-view>) to ensure that page components can be cached. To achieve global uniqueness, a routing name is predefined based on the business page name as the key value. In the routing configuration, meta information (meta) is set for each route, including a cache identifier (such as cache: true or cache: false) to indicate whether the page needs to be cached.

[0056] S102. Define a multi-tab state in the state management module, where the multi-tab state includes a set of opened tabs and a set of cached tabs.

[0057] In this step, define the multi-tab state in the state management module (such as Vuex) of the Vue project. Specifically, two key state sets will be created:

[0058] Set of visited opened tabs: This set is used to record the routing information or unique identifiers of all the tabs that the current user has opened. By maintaining this set, it is easy to obtain the pages where the user is currently operating.

[0059] Set of cached tabs: Corresponding to the set of opened tabs, this set is used to record which tab contents need to be cached. This is usually determined based on the routing meta information or business logic of the page. When the user switches back to a cached tab, the state can be directly restored from the cache without reloading the page content.

[0060] Through the above steps, the user experience can be improved. Users can quickly switch between different tabs while keeping the state of each tab unchanged, thus enhancing the user experience and satisfaction. By caching the content of the opened tabs, unnecessary page reloads and data requests can be reduced, thereby improving the response speed and performance of the application. Using the state management module to uniformly manage and synchronize the states between multiple tabs can avoid data inconsistency and conflict problems, ensuring the stability and reliability of the application.

[0061] S103. Define an include attribute on the keep-alive component and bind the include attribute to the value of the set of cached tabs.

[0062] In a Vue project, to improve performance and user experience, <keep-alive>Components are used to cache inactive component instances instead of destroying them. However, when dealing with a multi-tab scenario, it may not be desirable to cache all pages. Instead, there is a need to selectively cache those pages that users may frequently switch between or where the data changes infrequently. Therefore, a mechanism is required to control which pages should be <keep-alive>Component cache.

[0063] In this application <keep-alive>An `include` property is defined on the component. This property allows specifying a whitelist, and only the components in this whitelist will be cached. To combine this mechanism with the multi-tab state management, the `include` property is bound to the value of the set of cached tabs in the state management module.

[0064] Specifically, the set of cached tabs will store the route names or unique identifiers of the pages that need to be cached currently. Then, this set is converted into a string or a regular expression and assigned to <keep-alive>The include attribute of the component. In this way, when Vue renders <keep-alive>When wrapping a component, it checks whether the route name or identifier of the component is in the cached set of tab pages. If it is, it caches it; if not, it does not cache it.

[0065] In this way, it is possible to flexibly control which pages should be cached and which pages should be destroyed and reloaded, thus optimizing the performance and user experience of the application.

[0066] S104. Bind the rendering data of the project tab page to the value of the opened tab page set.

[0067] Create a tab page navigation component that is responsible for rendering all the tab pages in the currently opened tab page set. To achieve this, it is necessary to bind the rendering data of the tab page (such as the title of the tab page, the routing path, etc.) to the value of the opened tab page set in the state management module.

[0068] Specifically, in the tab page navigation component, the opened tab page set can be obtained from the Vuex state management module through a computed property or the mapState helper function. Then, this set is used to dynamically render the tab page navigation items. Each navigation item will display the title of the tab page, and when the user clicks on it, a navigation action will be triggered to take the user to the corresponding page.

[0069] To implement the navigation function, the push or replace method of Vue Router can be used to change the current route, thus switching to the tab page selected by the user. At the same time, it is also necessary to ensure that when the user switches between tab pages, <keep-alive>The component can correctly cache and restore the page state.

[0070] In an implementation of the embodiment of the present application, when opening a new tab page, the method further includes: obtaining the routing information in the new tab page; adding the routing name in the routing information in the new tab page to the set of opened tab pages; and judging whether caching is required according to the caching identifier in the routing meta-information, and if the identifier indicates that caching is required, adding the corresponding routing name to the set of cached tab pages.

[0071] Specifically, when the user requests to open a new tab page, the routing information corresponding to the new tab page will be obtained first. These information usually include the routing name, path, parameters, etc., which define the specific content and location of the new tab page. Next, the routing name of the new tab page will be added to the set of opened tab pages in the state management module. This step ensures that the set contains the routing information of all currently opened tab pages, providing a basis for subsequent tab page navigation and state management. After adding the new tab page to the set of opened tab pages, it is also necessary to judge whether it needs to be cached according to the caching identifier in the routing meta-information of the tab page. Routing meta-information is usually some additional information attached when defining the routing, used to control the behavior of the routing or provide additional functions. In this scenario, it is assumed that the routing meta-information contains an identifier for indicating whether to cache the page. If the caching identifier indicates that the page needs to be cached, the corresponding routing name will be added to the set of cached tab pages. In this way, when the user switches between tab pages, <keep-alive>The component can correctly cache and restore the page state according to this set.

[0072] In one implementation manner of the embodiment of the present application, when switching between multiple tab pages, the method further includes: judging whether the route name corresponding to the tab page to be switched is in the set of cached tab pages; if it is in the set of cached tab pages, retain the previously accessed state for switching; if it is not in the set of cached tab pages, reload the corresponding page.

[0073] When the user triggers a tab page switching operation, first, the route name corresponding to the target tab page (i.e., the tab page that the user hopes to switch to) will be obtained. This route name is usually obtained from the tab page button or link clicked by the user. Next, according to the route name of the target tab page, a search will be performed in the set of cached tab pages. This set stores the route names of all pages marked as needing to be cached. If the route name of the target tab page is found, it means that the page has been cached, and the page state in the cache can be directly used for switching. If not found, it means that the page has not been cached, and the corresponding page needs to be reloaded. If the target tab page is in the set of cached tab pages, the state of the page will be restored from the cache and presented to the user. This usually includes restoring the DOM structure, component state, data, etc. of the page. If the target tab page is not in the set of cached tab pages, the page reloading process will be triggered. This may include sending an HTTP request to obtain page data, rendering page content, etc.

[0074] In one implementation manner of the embodiment of the present application, when closing a specific tab page, the method further includes: obtaining the route information of the tab page to be closed; removing the route page name of the tab page to be closed from the set of opened tab pages; if the route page name of the tab page to be closed is in the set of cached tab pages, remove the page name from the set of cached tab pages; if the closed tab page is the currently opened tab page, automatically switch to the tab page corresponding to the last route name in the set of opened tab pages.

[0075] When the user triggers the operation of closing a tab page, it is first necessary to obtain the routing information corresponding to the tab page. This usually includes key information such as the routing name and page status. According to the obtained routing information, remove the routing page name of the tab page from the set of opened tab pages. This step ensures that the set only contains information about the currently still opened tab pages. Next, check whether the routing page name of the tab page to be closed exists in the set of cached tab pages. If it exists, remove it from the set. This step is to maintain the consistency of the cache status and avoid unnecessary caching of the closed page. If the tab page closed by the user is the currently opened tab page (i.e., the tab page the user is viewing), it is necessary to automatically switch to a new tab page to prevent the user from seeing a blank page or experiencing other unfriendly experiences. In this case, find the last routing name in the set of opened tab pages and display the corresponding tab page as the new current page. This step ensures that the user always has a page to view and the switching process is as smooth as possible.

[0076] In an implementation manner of the embodiment of the present application, when refreshing a tab page, the method further includes: removing the routing page name corresponding to the tab page from the set of cached tab pages; retaining the complete path of the current tab page, performing a routing redirect and passing the complete path to a dedicated redirect page; the redirect page receives the complete path and redirects back to the refreshed tab page; if the cache identifier corresponding to the tab page is set to be cached, add the corresponding routing name back to the set of cached tab pages.

[0077] When the user triggers the refresh operation of the tab page, first remove the routing page name corresponding to the tab page from the set of cached tab pages. This step is to ensure that old cached data is not misused during the refresh process. Next, retain the complete path of the current tab page (including any query parameters or hash values). Then, perform a routing redirect operation and pass the complete path as a parameter to a dedicated redirect page. After receiving the complete path, the redirect page immediately performs another redirect operation to redirect the user back to the refreshed tab page. This step ensures that the user can immediately see the refreshed page content.

[0078] If the cache identifier corresponding to the refreshed tab page is set to be cached, then after the page loading is completed, add the corresponding routing name back to the set of cached tab pages. In this way, the next time the user accesses this page, the page status can be directly loaded from the cache without reloading the page content.

[0079] In an implementation of the embodiment of the present application, when clicking on a specific item in the list - type tab page to jump to the corresponding detail tab page, the method further includes: calling the multi - tab module method to remove the routing page name corresponding to the detail tab page from the cached tab page set; executing the routing jump method to clear the original detail page cache and reset the entire page state.

[0080] When the user clicks on a specific item in the list - type tab page, first, the method of the multi - tab module is called to remove the routing page name corresponding to the detail tab page from the cached tab page set. This step is to ensure that before jumping to the detail page, the old cached data will not be used incorrectly. Next, the routing jump method is executed to redirect the user from the list page to the detail page. During this process, ensure that the detail page is loaded in a completely new state rather than being restored from the cache. When the detail page is loaded, the original detail page cache is cleared, and the entire page state is reset. This means that the detail page will be initialized like a brand - new page, and all components and data will be re - loaded.

[0081] In an implementation of the embodiment of the present application, the set of opened tab pages is cached using a persistent storage plugin so that the previous tab page state can be restored when the user revisits. To enhance the user experience and data consistency, a persistent storage plugin (such as vuex - persistedstate) is also used to cache the set of opened tab pages. In this way, even if the user closes the browser or refreshes the page, the state of the tab pages they previously opened can be restored, thus improving the usability and user experience of the application.

[0082] A multi - tab page cache management method based on the Vue framework provided in the above - mentioned embodiment of the present application realizes the effective management of page caching by using the keep - alive component to wrap the routing view component and combining the unique routing name defined by the business page name as the key value. By setting the cache identifier in the routing meta - information, it is possible to flexibly control which pages need to be cached and which do not, thereby optimizing resource usage. At the same time, the multi - tab page state defined in the state management module (including the set of opened tab pages and the set of cached tab pages) and using the persistent storage plugin to cache the set of opened tab pages ensure that the user can restore the previous tab page state between different sessions, greatly enhancing the user experience.

[0083] In addition, this method also includes rich function extensions. For example, when opening a new tab page, it decides whether to cache according to the cache identifier in the route meta information; when switching between multiple tab pages, it can retain the state of the cached pages or reload the uncached pages, ensuring the fluency and accuracy of page switching; when closing a specific tab page, it can synchronously update the sets of opened and cached tab pages and automatically switch to the appropriate tab page, avoiding blank or incorrect pages after user operations.

[0084] When refreshing a tab page, this method retains the complete path of the current tab page through a redirection mechanism, and when redirecting back to the refreshed tab page, it decides whether to add it back to the set of cached tab pages according to the cache identifier, realizing the restoration and update of the page state. When clicking on a specific item in a list-type tab page to jump to the corresponding detail tab page, by calling the multi-tab module method and executing the route jump method, it clears the original cache of the detail page and resets the entire page state, avoiding page state chaos.

[0085] In summary, this multi-tab page cache management method based on the Vue framework not only improves the user experience, but also realizes the effective management and restoration of page states through flexible cache control and rich function extensions, providing an efficient and reliable page cache management solution for developers.

[0086] The above are some specific implementation methods of a multi-tab page cache management method based on the Vue framework provided by this application embodiment. Based on this, this application also provides a corresponding device. Next, the device provided by this application embodiment will be introduced from the perspective of function modularization.

[0087] Figure 2 It is a schematic structural diagram of a multi-tab page cache management device based on the Vue framework provided by this application embodiment. Combining Figure 2 As shown, the multi-tab page cache management device 200 based on the Vue framework provided by this application embodiment includes:

[0088] The route view wrapping module 210 is used to wrap the route view component with the keep-alive component and pre-define the route name as the key value based on the business page name to ensure global uniqueness; set the cache identifier in the route meta information;

[0089] The multi-tab page state management module 220 is used to define the multi-tab page state in the state management module, and the multi-tab page state includes the set of opened tab pages and the set of cached tab pages;

[0090] The component configuration module 230 is used to define the include attribute on the keep-alive component and bind the include attribute to the value of the set of cached tab pages;

[0091] The project label page rendering module 240 is used to bind the rendering data of the project label page to the value of the opened label page set.

[0092] In an implementation manner of the embodiment of the present application, the device further includes: a new label page opening module, configured to obtain the routing information in the new label page when opening a new label page, add the routing name in the routing information in the new label page to the opened label page set, and determine whether caching is required according to the cache identifier in the routing meta-information. If the identifier indicates that caching is required, add the corresponding routing name to the cached label page set.

[0093] In an implementation manner of the embodiment of the present application, the device further includes:

[0094] The label page switching module is used to, when switching between multiple label pages, determine whether the routing name corresponding to the label page to be switched is in the cached label page set. If it is in the cached label page set, retain the previously accessed state for switching; if it is not in the cached label page set, reload the corresponding page.

[0095] In an implementation manner of the embodiment of the present application, the device further includes:

[0096] The label page closing module is used to, when closing a specific label page, obtain the routing information of the label page to be closed, remove the routing page name of the label page to be closed from the opened label page set. If the routing page name of the label page to be closed is in the cached label page set, remove the page name from the cached label page set. If the closed label page is the currently opened label page, automatically switch to the label page corresponding to the last routing name in the opened label page set.

[0097] In an implementation manner of the embodiment of the present application, the device further includes:

[0098] The label page refreshing module is used to, when refreshing a label page, remove the routing page name corresponding to the label page from the cached label page set, retain the complete path of the current label page, perform a routing redirection and pass the complete path to a dedicated redirection page. The redirection page accepts the complete path and redirects back to the refreshed label page. If the cache identifier corresponding to the label page indicates that caching is required, add its corresponding routing name back to the cached label page set.

[0099] In an implementation manner of the embodiment of the present application, the device further includes:

[0100] The detail page jump module is used to call the multi-tab module method to remove the route page name corresponding to the detail tab page from the cached tab page set when clicking on a specific item from the list - type tab page to jump to the corresponding detail tab page, execute the route jump method, clear the original detail page cache, and reset the entire page state.

[0101] The embodiments of the present application also provide corresponding devices and computer storage media for implementing the solutions provided by the embodiments of the present application.

[0102] Among them, the device includes a memory and a processor. The memory is used to store instructions or code, and the processor is used to execute the instructions or code so that the device executes the method described in any embodiment of the present application.

[0103] The computer storage medium stores code, and when the code is run, the device running the code implements the method described in any embodiment of the present application.

[0104] From the description of the above - mentioned implementation manners, those skilled in the art can clearly understand that all or part of the steps in the above - mentioned embodiment methods can be implemented by means of software plus a general - purpose hardware platform. Based on such an understanding, the technical solution of the present application can be embodied in the form of a software product. The computer software product can be stored in a storage medium, such as read - only memory (ROM) / RAM, magnetic disk, optical disk, etc., and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network communication device such as a router) to execute the methods described in each embodiment or some parts of the embodiments of the present application.

[0105] It should be noted that in this article, the term "including", "comprising" or any other variant thereof is intended to cover non - exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or further includes elements inherent to such a process, method, article or device. Without more limitations, an element defined by the statement "including a..." does not exclude the existence of another identical element in the process, method, article or device including the said element.

[0106] It should also be noted that the embodiments in this specification are all described in a progressive manner. For the same or similar parts among the embodiments, reference can be made to each other, and the key point of each embodiment is to illustrate the differences from other embodiments. In particular, for the embodiments of the device and apparatus, since they are basically similar to the method embodiments, the description is relatively simple, and reference can be made to the corresponding parts of the method embodiments for the relevant content. The device and apparatus embodiments described above are only illustrative. The units described as separate components may or may not be physically separated, and the components referred to as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative efforts.

[0107] As described above, this is only a specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions that can be easily thought of by those skilled in the art within the technical scope disclosed by the present application should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A multi-tab page cache management method based on the Vue framework, characterized in that: The method comprises: Use the keep-alive component to wrap the routing view component, and pre-define the routing name as the key value based on the business page name to ensure global uniqueness; set the cache identifier in the routing meta information; Defining a multi-tab page state in a state management module, wherein the multi-tab page state includes an opened tab page set and a cached tab page set; Defining an include attribute on the keep-alive component, and binding the include attribute to the value of the cached tab set; Binds the project tab's rendered data to the value of the set of opened tabs.

2. The method according to claim 1, characterized in that When opening a new tab, the method further includes: Get the routing information in the new tab; Adding the route name in the route information in the new tab page to the set of opened tab pages; Whether caching is required is determined according to the cache identifier in the routing meta-information. If it is identified as caching, the corresponding routing name is added to the cached tab page set.

3. The method according to claim 1, characterized in that When multiple tabs are switched, the method further includes: Determine whether the route name corresponding to the tab to be switched is in the cached tab set according to the route name corresponding to the tab to be switched; If it is in the cached tab set, the previous access status is retained for switching; If it is not in the cached tab set, reload the corresponding page.

4. The method according to claim 1, characterized in that When closing a specific tab page, the method further includes: Get the routing information of the tab to be closed; Remove the routing page name of the tab to be closed from the set of opened tabs; If the routing page name of the tab page to be closed is in the cached tab page set, remove the page name from the cached tab page set; If the closed tab is the currently open tab, it will automatically switch to the tab corresponding to the last route name in the set of opened tabs.

5. The method according to claim 1, characterized in that When refreshing the tab page, the method further includes: Remove the routing page name corresponding to the tab from the cached tab set; Keep the full path of the current tab, route the redirect and pass the full path to a dedicated redirect page; The redirect page accepts the full path and redirects back to the refreshed tab page; If the cache mark corresponding to the tab page indicates that caching is required, the corresponding route name is added back to the cached tab page set.

6. The method according to claim 1, characterized in that When a specific item is clicked from the list tab page to jump to the corresponding detail tab page, the method further includes: Call the multi-tab module method to remove the routing page name corresponding to the detail tab from the cached tab set; Execute the route jump method, clear the original detail page cache and reset the entire page status.

7. The method according to any one of claims 1 to 6, characterized in that The set of opened tabs is cached using a persistent storage plug-in so that the previous tab state can be restored when the user revisits the page.

8. A multi-tab page cache management device based on Vue framework, characterized in that: The device comprises: The routing view wrapping module is used to wrap the routing view component with the keep-alive component, and predefine the routing name as the key value based on the business page name to ensure global uniqueness; set the cache identifier in the routing meta information; A multi-tab page state management module, used to define a multi-tab page state in the state management module, wherein the multi-tab page state includes an open tab page set and a cached tab page set; A component configuration module, used to define an include attribute on the keep-alive component, and bind the include attribute to the value of the cached tab set; The project tab rendering module is used to bind the rendering data of the project tab to the value of the opened tab set.

9. A computing device, characterized in that The computing device includes: a memory and a processor; The memory is used to store computer programs; The processor is configured to implement the method according to any one of claims 1 to 7 when executing the computer program.

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

Images