Multi-level routing intelligent cache management method

Abstract

This invention discloses a multi-level intelligent route caching management method, including: obtaining tab operations, such as opening a tab, closing a tab, and refreshing a tab; obtaining the route object of the current tab corresponding to the tab operation; updating the tabs in the visited route array based on the route object; and updating the cache list based on the updated visited route array. Updating the cache list based on the updated visited route array ensures that the cache is updated synchronously when tabs change, and the cache corresponding to closed tabs can be automatically cleared, which also helps avoid wasting memory. When the tab operation is to refresh a tab, only the pages that need to be refreshed are rendered, destroyed, and re-rendered to refresh the specified tabs, while other tabs that do not need to be refreshed remain in a cached state, avoiding page flickering and achieving fine-grained control over page refresh.

Description

Technical Field

[0001] This invention relates to the field of routing caching technology, and more specifically, to a multi-level intelligent routing caching management method. Background Technology

[0002] As the complexity of web applications continues to increase, Single Page Applications (SPAs) have become the mainstream architecture for modern web development. In enterprise-level backend management systems, the tabbed browsing model is widely adopted, allowing users to open multiple pages in the same browser window and quickly switch between them.

[0003] To improve user experience and application performance, front-end frameworks (such as Vue.js and React) commonly employ component caching mechanisms (e.g., Vue's Keep-Alive component) to store visited page components in memory, avoiding repeated rendering and data reloading. However, in multi-tab application scenarios, traditional cache management methods have systemic flaws, such as: 1. Inflexible cache refresh mechanism: When multiple tabs are open, it's impossible to refresh only the specified tab, affecting other tabs. 2. Memory overflow: All open tabs are cached, leading to disordered memory growth. 3. Tab state and cache are out of sync: In current technologies, tab management and caching are two independent systems, unable to detect synchronization.

[0004] Prior art 1 (application number 202410044303.7, application date: 2024.01.11) discloses a method and system for switching tabs within a single page based on React, including: if a user closes an open menu, the corresponding title tab in the menu's title tab area 303 is hidden and no longer displayed. Simultaneously, the corresponding data for closing the menu in the React cache is destroyed and cleared. Once a change in the state of the displayed content within the screen area 305 is detected, it is first determined whether title tab 2 is in the cache list. If it is in the cache list, it means that the React cache contains screen data for title tab 2, which was cached when title tab 2 was opened. In this case, the latest screen data after the user's operation on the page needs to be retrieved, and then the data for title tab 2 stored in the React cache is updated. Thus, when the user switches back to title tab 2 from other title tabs, the screen displayed after the user's operation, such as the sorted or filtered screen, will be retained, instead of re-rendering and restoring title tab 2 to its default state. In other words, existing technologies disclose how to update cached content after tag data changes, but do not explain the specific technology for implementing tag management and cache synchronization, nor do they involve the technology for independently refreshing a specific tag.

[0005] Therefore, how to achieve tab management and cache synchronization, and how to independently refresh a specified tab, has become a pressing technical problem that needs to be solved. Summary of the Invention

[0006] In view of this, the present invention provides a multi-level intelligent routing cache management method, comprising:

[0007] Obtain tab operations, including opening a tab, closing a tab, and refreshing a tab;

[0008] Obtain the route object of the current tab corresponding to the tab operation;

[0009] When the tab operation is "open tab", the tags in the visited route array are updated according to the route object, including: determining whether to create the tag based on the metadata of the route object; if the tag is not created, the determination ends; if the tag is created, searching in the visited route array for a tag with the same actual path as the route object; if a tag with the same actual path as the route object exists, merging the attributes of the route object and the tag with the same actual path as the route object to complete the update of the tags in the visited route array; if no tag with the same actual path as the route object exists, creating the tag corresponding to the route object at the end of the visited route array to complete the update of the tags in the visited route array.

[0010] When the tab operation is to close the tab, the tab corresponding to the route object is removed from the visited route array, thus completing the update of the visited route array;

[0011] When the tab operation is to refresh the tab, save the route key of the route object, set the route key to an empty value, and render and destroy the page corresponding to the empty route key; traverse the visited route array, mark the tag corresponding to the route object in the visited route array as temporarily removed, and complete the update of the visited route array; update the cache list according to the updated visited route array; after the rendering and destruction are completed, restore the route key of the route object to a non-empty value, trigger the reloading of the route object, create a new tag in the visited route array according to the route object and replace the tag marked as temporarily removed corresponding to the route object, and complete the update of the visited route array;

[0012] The cache list is updated based on the updated visited route array, including: providing an initialized cache list; traversing the updated visited route array and performing a cache determination on any tag in the visited route array, including: determining whether the tag is marked as permanently disabled for caching; if the tag is marked as permanently disabled for caching, skipping the tag; if the tag is not marked as permanently disabled for caching, determining whether the tag is marked as temporarily removed; if the tag is marked as temporarily removed, skipping the tag; if the tag is not marked as temporarily removed, storing the cache key of the route object corresponding to the tag in the cache list; and completing the update of the cache list after all tags in the updated visited route array have been determined.

[0013] Compared with existing technologies, the multi-level routing intelligent cache management method provided by this invention achieves at least the following beneficial effects:

[0014] 1. The multi-level route intelligent cache management method provided by this invention updates the accessed route array when a tab is opened, closed, or refreshed, and updates the cache list after the accessed route array is updated. This includes: providing an initialized cache list; traversing the updated accessed route array and performing cache judgment on any tag in the accessed route array, including: determining whether the tag is marked as permanently disabled for caching; if the tag is marked as permanently disabled for caching, skipping the tag; if the tag is not marked as permanently disabled for caching, determining whether the tag is marked as temporarily removed; if the tag is marked as temporarily removed, skipping the tag; if the tag is not marked as temporarily removed, storing the cache key of the route object corresponding to the tag in the cache list; and updating the cache list after all tags in the updated accessed route array have been judged, thus achieving synchronous cache updates when tabs change, ensuring synchronization and consistency between tab management and caching. Furthermore, after a tab is closed, the cache corresponding to the closed tab can be automatically cleared, thereby avoiding memory waste.

[0015] 2. The multi-level route intelligent cache management method provided by this invention, when the tab operation is to refresh the tab, saves the route key of the route object, sets the route key to an empty value, and renders and destroys the pages corresponding to the empty route key; iterates through the visited route array, marks the tags corresponding to the route object in the visited route array as temporarily removed, and completes the update of the visited route array; updates the cache list according to the updated visited route array; after the rendering and destruction are completed, restores the route key of the route object to a non-empty value, triggers the reloading of the route object, creates new tags in the visited route array according to the route object and replaces the tags marked as temporarily removed corresponding to the route object, and completes the update of the visited route array; updates the cache list according to the updated visited route array. That is, only the pages that need to be refreshed are rendered, destroyed, and re-rendered to refresh the specified tabs, while other tabs that do not need to be refreshed remain in a cached state, and there will be no page flickering. This avoids the tab refresh operation being limited to a coarse "all or nothing" strategy and achieves fine-grained control of page refresh.

[0016] Of course, any product implementing this invention does not necessarily need to achieve all of the technical effects described above at the same time.

[0017] Other features and advantages of the invention will become clear from the following detailed description of exemplary embodiments of the invention with reference to the accompanying drawings. Attached Figure Description

[0018] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments of the invention and, together with their description, serve to explain the principles of the invention.

[0019] Figure 1 This is a flowchart illustrating a multi-level routing intelligent cache management method provided by the present invention.

[0020] Figure 2 This is an architecture diagram of the multi-level routing intelligent cache management method provided by the present invention.

[0021] Figure 3 This is a flowchart illustrating a multi-level route intelligent cache management method provided by the present invention, which updates the cache list based on the updated accessed route array.

[0022] Figure 4 This is another flowchart illustrating the multi-level routing intelligent cache management method provided by the present invention.

[0023] Figure 5 This is a flowchart illustrating the multi-level routing intelligent cache management method provided by the present invention when the tab operation is to refresh the tab.

[0024] Figure 6 This is a flowchart illustrating the multi-level routing intelligent cache management method provided by the present invention when a tab operation occurs.

[0025] Figure 7 This is a schematic diagram of a process for generating cache keys in the multi-level routing intelligent cache management method provided by the present invention.

[0026] In the diagram: 1. User interaction layer; 2. Routing and state management layer; 3. Cache calculation and control layer; 4. Component rendering and caching layer; 5. Persistent storage layer. Detailed Implementation

[0027] Various exemplary embodiments of the invention will now be described in detail with reference to the accompanying drawings. It should be noted that, unless otherwise specifically stated, the relative arrangement, numerical expressions, and values ​​of the components and steps set forth in these embodiments do not limit the scope of the invention. The following description of at least one exemplary embodiment is merely illustrative and is in no way intended to limit the invention or its application or use. Techniques, methods, and devices known to those skilled in the art may not be discussed in detail, but where appropriate, such techniques, methods, and devices should be considered part of the specification. In all examples shown and discussed herein, any specific values ​​should be interpreted as merely exemplary and not as limitations. Therefore, other examples of exemplary embodiments may have different values. It should be noted that similar reference numerals and letters in the following drawings denote similar items; therefore, once an item is defined in one drawing, it need not be further discussed in subsequent drawings.

[0028] Example 1

[0029] Reference Figure 1 , Figure 2 and Figure 3 , Figure 1 This is a flowchart illustrating a multi-level routing intelligent cache management method provided by the present invention. Figure 2 This is an architecture diagram of the multi-level routing intelligent cache management method provided by the present invention. Figure 3 This is a flowchart illustrating a specific embodiment of the multi-level route intelligent cache management method provided by the present invention, which updates the cache list based on the updated accessed route array. The method includes: S101: obtaining tab operations, including opening tabs, closing tabs, and refreshing tabs.

[0030] S102: Get the route object of the current tab corresponding to the tab operation;

[0031] S1031: When the tab operation is to open a tab, update the tabs in the visited route array according to the route object;

[0032] S1032: When the tab operation is to close the tab, remove the tab corresponding to the route object from the visited route array to complete the update of the visited route array;

[0033] S1033: When the tab operation is to refresh the tab, save the route key of the route object, set the route key to an empty value, and render and destroy the page corresponding to the route key with an empty value; traverse the visited route array, mark the tags in the visited route array corresponding to the route object as temporarily removed, and complete the update of the visited route array; update the cache list according to the updated visited route array; after the rendering and destruction are completed, restore the route key of the route object to a non-empty value, trigger the reloading of the route object, create new tags in the visited route array according to the route object and replace the tags marked as temporarily removed corresponding to the route object, and complete the update of the visited route array;

[0034] S104: Update the cache list based on the updated visited route array, including:

[0035] S1041: Provides the initial cache list;

[0036] S1042: Traverse the updated visited route array, and perform a cache check for any tag in the visited route array, including:

[0037] S10421: Determine whether the tag is marked as permanently disabled for caching;

[0038] S104211: If the tag is marked as permanently disabling caching, skip the tag;

[0039] S104212: If the tag is not marked as permanently disabled for caching, determine whether the tag is marked as temporarily removed;

[0040] S1042121: If a tag is marked as temporarily removed, skip the tag;

[0041] S1042122: If the tag is not marked as temporarily removed, store the cache key of the route object corresponding to the tag in the cache list;

[0042] S1043: Once all tags in the updated visited route array have been evaluated, the cache list update is complete.

[0043] It should be noted that in step S101, referring to Figure 2Tab operations occur in user interaction layer 1, and user tab operations can be obtained by listening for user triggers. User tab operations cause route changes, and the route and state management layer 2 listens for route changes in real time. Specifically, the component implementing route listening can be Vue Router. The route and state management layer 2 also includes tab state management (TabsStore), including: visitedRoutes:Array, addVisitedRoute(), delVisitedRoute(), handleCaughtRoutes(), etc. The cache calculation and control layer 3 includes RouteKeyGenerator and KeepAliveListCalculator. RouteKeyGenerator implements input: route, isTab; output: uniqueKey, specifically: if dynamicNewTab; return fullPathWithQuery; else; return rawPath. KeepAliveListCalculator implements input: visitedRoutes; output: keepAliveNameList, specifically: filter(noKeepAlive=false); filter(namel=refreshing); map(route => route.name). The component rendering and caching layer 4 specifically includes: <router-view> ； <transition> ;<keep-alive:include='keepAliveList':max='99'> ;<component:is='Component':key=routerKey' / > ;;< / transition> ；< / router-view>The persistent storage layer 5 includes localStorage, caughtRoutes:JSON.stringify, etc., which are stored when the tab changes and restored when the application starts. In step S102, the current tab is either a newly opened tab, a tab to be refreshed, or a tab to be closed. In step S1033, when the tab operation is to refresh the tab, the input should be the name of the route object to be refreshed, refreshRouteName, to reload the current tab while keeping other tabs cached. This includes a temporary cache removal phase and a cache restoration phase. The temporary cache removal phase includes: saving the current route key, specifically: cacheActivePath=routerKey.value; clearing the route key to trigger component uninstallation, that is, setting the route key to an empty value and rendering and destroying the page corresponding to the empty route key, specifically: routerKey.value=null; Vue detects a key change and destroys the old component instance. Correspondingly, after triggering component unloading, the current component should also be temporarily removed from the cache list. Specifically, this involves calling `updateKeepAliveNameList(refreshRouteName)`, which internally iterates through `visitedRoutes` and checks if `route.name === refreshRouteName`. If yes, the route is skipped (i.e., not added to the cache list, achieving temporary removal); otherwise, it is added to `keepAliveNameList`. Keep-Alive detects a change in `include` and destroys caches not in the list. Finally, it waits for the DOM object to update completely, specifically by calling `await nextTick()`, to ensure that Vue completes all reactive updates and DOM operations. The cache recovery phase includes: restoring the route key to trigger component remounting, i.e., restoring the route key of the route object to a non-null value, triggering the reloading of the route object, specifically: `routerKey.value = cacheActivePath`. Vue detects the key change, creates a new component instance, and executes the full lifecycle (created, mounted, etc.). Then restore the cache, specifically by calling updateKeepAliveNameList() (without passing any parameters). Internally, it iterates through visitedRoutes, adding all routes (including those that have just been refreshed) to the cache list, and Keep-Alive starts caching newly created component instances.

[0044] Reference Figure 3The initial cache list provided can also be called the initial result array, specifically: keepAliveNameList=[]. Iterate through the updated visited route array, specifically: FOR EACH route INvisitedRoutes. Determine if the tag is marked as permanently disabled for caching, specifically: route.meta.noKeepAlive===true? If yes, skip the route; if no, determine if the tag is marked as temporarily removed, specifically: route.name===refreshRouteName? If yes, skip the route; if no, store the cache key of the route object corresponding to the tag in the cache list, specifically: keepAliveNameList.push(route.name). Finally, return the result, specifically: returnkeepAliveNameList. Through dual checks of permanently disabling caching and temporarily removing, combined with business metadata (noKeepAlive) and refresh status (refreshRouteName) for intelligent filtering, business-aware cache management is achieved.

[0045] Understandably, the multi-level route intelligent cache management method provided by this invention updates the accessed route array when a tab is opened, closed, or refreshed, and updates the cache list after the accessed route array is updated. This ensures that the cache is updated synchronously when tabs change, making tab management and caching synchronized and consistent. Furthermore, the cache corresponding to the closed tab is automatically cleared after the tab is closed, thus avoiding wasted memory. Moreover, only the pages that need to be refreshed are rendered, destroyed, and re-rendered to refresh the specified tabs; other tabs that do not need to be refreshed remain in the cached state, preventing page flickering. This avoids the tab refresh operation being limited to a coarse "all or nothing" strategy, achieving fine-grained control over page refresh.

[0046] Example 2

[0047] Reference Figure 4 , Figure 5 , Figure 6 and Figure 7 , Figure 4 This is another flowchart illustrating the multi-level routing intelligent cache management method provided by the present invention. Figure 5 This is a flowchart illustrating the multi-level routing intelligent cache management method provided by the present invention when the tab operation is to refresh the tab. Figure 6 This is a flowchart illustrating the multi-level routing intelligent cache management method provided by the present invention when a tab operation occurs. Figure 7This is a flowchart illustrating one aspect of the cache key generation process in the multi-level routing intelligent cache management method provided by the present invention, to illustrate another specific embodiment of the multi-level routing intelligent cache management method provided by the present invention, including: S201: obtaining tab operations, the tab operations including opening a tab, closing a tab, and refreshing a tab.

[0048] S202: Get the route object of the current tab corresponding to the tab operation.

[0049] S2031: When the tab operation is to open a tab, update the tabs in the visited route array based on the route object;

[0050] Specifically, when the tab operation is to open a tab, the tabs in the visited route array are updated based on the route object, including:

[0051] Determine whether to create a label based on the metadata of the routing object;

[0052] If no tag is created, the judgment ends; if a tag is created, the system searches the visited route array for a tag with the same actual path as the route object; if a tag with the same actual path as the route object exists, the attributes of the route object and the tag with the same actual path as the route object are merged to update the tags in the visited route array; if no tag with the same actual path as the route object exists, a tag corresponding to the route object is created at the end of the visited route array based on the route object to update the tags in the visited route array.

[0053] Check if there is a tag marked as disallowed to be closed in the visited route array;

[0054] If a label is found that indicates the user cannot close the window, the judgment process ends.

[0055] If there is no tag marked as not allowed to be closed, mark the tag corresponding to the route object in the visited route array as not allowed to be closed.

[0056] S2032: When the tab operation is to close the tab, determine whether the route object allows closing;

[0057] If closing is not allowed, the judgment ends; if closing is allowed, close the page corresponding to the route object, remove the tag corresponding to the route object from the visited route array, and complete the update of the visited route array; then jump to the tab corresponding to the tag adjacent to the tag corresponding to the route object in the visited route array.

[0058] S2033: When the tab operation is to refresh the tab.

[0059] S20331: Determine whether to display the progress bar;

[0060] S203311: If a progress bar is to be displayed, the progress component is invoked, and the progress component displays a progress animation on the page corresponding to the route object;

[0061] S203312: If the progress bar is not displayed, the judgment ends;

[0062] S20332: Save the route key of the route object, set the route key to an empty value, render and destroy the page corresponding to the route key with an empty value; traverse the visited route array, mark the tag corresponding to the route object in the visited route array as temporarily removed, and complete the update of the visited route array;

[0063] S20333: Update the cache list based on the updated array of visited routes;

[0064] S20334: After the rendering is completed, restore the route key of the route object to a non-null value, trigger the reloading of the route object, create new tags in the visited route array based on the route object and replace the tags whose markers are temporarily removed corresponding to the route object, and complete the update of the visited route array.

[0065] S20335: Delay the display of progress animation for a preset time period;

[0066] S204: Update the cache list based on the updated visited route array, including:

[0067] S2041: Provides an initial cache list;

[0068] S2042: Traverse the updated visited route array, and perform a cache check for any tag in the visited route array, including:

[0069] S20421: Determine whether the tag is marked as permanently disabled for caching;

[0070] S204211: If the tag is marked as permanently disabling caching, skip the tag;

[0071] S204212: If the tag is not marked as permanently disabled for caching, determine whether the tag is marked as temporarily removed;

[0072] S2042121: If a tag is marked as temporarily removed, skip the tag;

[0073] S2042122: If the tag is not marked as temporarily removed, store the cache key of the route object corresponding to the tag in the cache list;

[0074] S2043: Once all tags in the updated visited route array have been evaluated, complete the update of the cache list;

[0075] In step S2042122, the cache key of the routing object corresponding to the tag is stored in the cache list, including:

[0076] S20421221: Generate cache keys based on the route object corresponding to the tag, including:

[0077] S204212211: Determine if there is matching data in the route object corresponding to the tag. The matching data includes the actual path.

[0078] S2042122111: If no matching data exists, the path of the routing object corresponding to the tag will be used as the original path;

[0079] S2042122112: If matching data exists, use the actual path as the original path, and determine whether there are query parameters in the routing object corresponding to the tag and whether the query parameters are not empty;

[0080] S20421221121: If the conditions of having query parameters and the query parameters not being empty are not met, the original path will be used as the complete path;

[0081] S20421221122: If the query parameters exist and are not empty, combine the query parameters with the original path to form the complete path;

[0082] S204212212: Determine if the route object corresponding to the tag is in tab mode;

[0083] S2042122121: If it is not in tab mode, check if there is an activation menu in the route object corresponding to the tab;

[0084] S20421221211: If an activation menu exists, use the activation menu as the cache key for the route object corresponding to the tag;

[0085] S20421221212: If the activation menu does not exist, the full path will be used as the cache key for the route object corresponding to the label;

[0086] S2042122122: If it is tabbed mode, determine whether page tags exist;

[0087] S20421221221: If a page tag exists, use the full path as the cache key for the route object corresponding to the tag;

[0088] S20421221222: If no page tag exists, the original path will be used as the cache key for the route object corresponding to the tag;

[0089] S20421222: Store the cache key in the cache list;

[0090] S205: When the tab operation is to open a tab, or when the tab operation is to close a tab, after updating the cache list based on the updated visited route array, it also includes:

[0091] Update the storage layer based on the updated cache list.

[0092] It should be noted that in step S2031, when the tab operation is to open a tab, the route guard captures the route change. Specifically, Vue Router's beforeEach hook captures the route jump. It determines whether to create a tab based on the route object's metadata: `meta.tabHidden === true?` If yes, the tab is not displayed, and the process terminates. If no, it searches the visited route array for a tab with the same path as the route object. Specifically, it searches for a tab with the same path in `visitedRoutes`, saves it as `target`, and checks if `target` exists and `meta.dynamicNewTab !== true?` If yes, it updates the existing tab (by merging attributes using `Object.assign`), that is, merging the attributes of the tag with the same path as the route object. If no, it creates a new tab (by pushing it to the end of `visitedRoutes`), that is, creating the tab corresponding to the route object at the end of the visited route array. Then, it checks if there are any tags marked as not allowed to be closed in the visited route array, ensuring that at least one tag cannot be closed. Specifically, it checks if there are any routes in visitedRoutes with noClosable===true. If not, it sets visitedRoutes[0].meta.noClosable=true. The cache list is updated based on the updated visited route array, i.e., cache synchronization is automatically triggered. Specifically, when visitedRoutes changes, the watchEffect listener is triggered, the cache list calculation function is called, keepAliveNameList is updated, and Keep-Alive automatically caches new components.

[0093] In step S2032, when the tab operation is to close the tab, it is determined whether the route object allows closing. Specifically, it checks whether the current route's `meta.noClosable === true`. If yes, closing is prohibited, a prompt is displayed, and the process is terminated. If not, the tag corresponding to the route object is removed from the visited route array, specifically: `visitedRoutes = visitedRoutes.filter(route => route.path !== path)`. The cache list is updated according to the updated visited route array, i.e., cache synchronization is automatically triggered. Specifically, when `visitedRoutes` changes, the `watchEffect` listener is triggered, and `keepAliveNameList` is recalculated (the name of the route is no longer included). Keep-Alive detects changes in the include list and automatically destroys cached items not in the list, releasing memory. Finally, it jumps to the tab corresponding to the tag adjacent to the tag corresponding to the route object in the visited route array, specifically: it checks whether the currently active tab is closed. If yes, it jumps to the adjacent tab.

[0094] In step S2033, when the tab operation is to refresh the tab, it is determined whether a progress bar should be displayed. If a progress bar is displayed, the progress component is called, specifically: Checking: `theme.showProgressBar === true?` If yes, calling `NProgress.start()`. The progress animation is then delayed by a preset time period, specifically: `setTimeout(()=>{checking: `theme.showProgressBar === true?` If yes, calling `NProgress.done()}, 200)` / / Reserving time for the animation. In this embodiment, the preset time is 200ms, reserving 200ms for animation time as a fallback. Even if the page finishes loading 0.2 seconds after refreshing, the progress bar animation will close later, effectively avoiding noticeable visual jitter. Of course, this is not limited to this; the specific delay duration can be set according to actual needs. This embodiment does not impose specific limitations on this.

[0095] Generate a cache key based on the route object corresponding to the tag. Specifically: Extract basic information of the route object: extract meta, path, matched, and query from the route. Calculate the original path and check: Does matched exist? If yes, rawPath = path of the last item in the matched array; otherwise, rawPath = route.path. Generate the complete path and check: Does query exist and is not empty? If yes, fullPath = path + "?" + stringify(query); otherwise, fullPath = path. Return the cache key based on the usage scenario and check: isTab === true (tab mode)? If isTab === true, proceed to the sub-check: Check: Does meta.dynamicNewTab === true? If yes, return fullPath (including parameters, enabling multiple instances); otherwise, return rawPath (without parameters, reusing instances). If isTab ≠ true, check: Does meta.activeMenu exist? If yes, return meta.activeMenu; otherwise, return fullPath.

[0096] In step S204, when the tab operation is to open a tab or when the tab operation is to close a tab, after updating the cache list according to the updated visited route array, the storage layer is updated according to the updated cache list. Specifically, it checks whether persistenceTab === true. If yes, it sets localStorage.setItem('caughtRoutes', JSON.stringify(visitedRoutes)); if no, it removes localStorage.removeItem('caughtRoutes').

[0097] Understandably, the parameters are dynamically included in the cache key based on the routing object's metadata, ensuring each routing object has a unique cache key string. This establishes a one-to-many mapping between "route identifier" and "cache instance," enabling multi-instance caching without modifying the underlying Keep-Alive mechanism. This avoids issues like identical content or data pollution when tabs with the same component name are opened. Because the cache and tab data are synchronized and the correspondence is more explicit, changes to the tab order will not cause display errors or affect the LRU strategy due to asynchronous cache and tab order. When a tab is opened, closed, or refreshed, the accessed route array is updated accordingly, and the cache list is updated after the accessed route array is updated. This ensures synchronous cache updates when tabs change, maintaining synchronization and consistency between tab management and caching. Furthermore, the cache corresponding to a closed tab is automatically cleared, preventing memory waste. Furthermore, only the pages that need to be refreshed are rendered, destroyed, and re-rendered to refresh the specified tabs. Other tabs that do not need to be refreshed remain cached, preventing page flickering. This avoids the need for a coarse "all or nothing" strategy for tab refresh operations, enabling fine-grained control over page refresh. The multi-level routing intelligent cache management method provided by this invention was used to perform 100 refresh operations, and the results are shown in Table 1.

[0098] Table 1. Comparison of 100 refresh operations

[0099] It is evident that the solution of this invention has a better average refresh time, fewer page flickers, less impact from other tags, and better performance compared to the existing technology.

[0100] Example 3

[0101] This embodiment provides a specific implementation of the multi-level routing intelligent cache management method provided by the present invention, including:

[0102] The routing object structure (core data structure) includes:

[0103] interface TelchinaRoute {

[0104] path: string / / route path

[0105] name: string / / Route name (used for Keep-Alive matching)

[0106] query?:Record<string, any> / / URL parameter (used to generate cache key)

[0107] params?:Record<string, any> / / Path parameters

[0108] meta:{

[0109] title: string / / Tag title

[0110] dynamicNewTab?:boolean / / (Core configuration: Whether to support multiple instances)

[0111] noKeepAlive?:boolean / / (Core configuration: Whether to disable caching)

[0112] noClosable?:boolean / / (Core configuration: whether to disable closing)

[0113] tabHidden?:boolean / / Whether to hide the tab

[0114] activeMenu?:string / / Activated menu path

[0115] [key:string]:any / / Other custom attributes

[0116] }

[0117] matched?:TelchinaRoute[] / / The parent route chain to be matched (used to obtain the normalized path)

[0118] parentIcon?:string / / Inherited parent icon

[0119] }

[0120] The cache state structure includes:

[0121] interface TabsModuleType {

[0122] visitedRoutes:TelchinaRoute[] / / (Core state: array of visited routes)

[0123] caughtRoutes: any[] / / Backup storage

[0124] }

[0125] interface KeepAliveState {

[0126] keepAliveNameList:string[] / / (Core state: a list of cached component names)

[0127] routerKey: string | null / / (Core state: current route key) keepAliveMaxNum: number / / Maximum cache size: 99

[0128] }

[0129] The user opens two order details pages simultaneously, including:

[0130] Step 1: Configure routing (declare support for multiple instances)

[0131] {

[0132] path:' / order / detail',

[0133] name:'OrderDetail',

[0134] component:OrderDetailView,

[0135] meta:{

[0136] title:'Order Details',

[0137] dynamicNewTab:true / / (Critical configuration: Enables multiple instances)

[0138] }

[0139] }

[0140] Step 2: The user clicks the menu to open order 1001

[0141] User action: Click "Order 1001"

[0142] → The route redirects to / order / detail?id=1001

[0143] →Route guard capture

[0144] → Call addVisitedRoute({path:' / order / detail',query:{id:1001}, meta:{...}})

[0145] → Check: This route does not exist in visitedRoutes → Create a new tab

[0146] →visitedRoutes=[{path:' / order / detail',query:{id:1001},...}]

[0147] → Trigger watchEffect

[0148] → Call handleActivePath(route, true)

[0149] →Judgement: meta.dynamicNewTab===true

[0150] → Returns to " / order / detail?id=1001"

[0151] →routerKey=" / order / detail?id=1001"

[0152] →keepAliveNameList=['OrderDetail']

[0153] →Keep-Alive uses key=" / order / detail?id=1001" to cache component instances.

[0154] Step 3: The user clicks the menu again to open order 1002

[0155] User action: Click "Order 1002"

[0156] → The route redirects to / order / detail?id=1002

[0157] →Route guard capture

[0158] → Call addVisitedRoute({path:' / order / detail',query:{id: 1002},meta:{...}})

[0159] → Check if a route with path=' / order / detail' exists in visitedRoutes.

[0160] →Judgement: meta.dynamicNewTab===true

[0161] →Create a new tag (not reused) [Key decision]

[0162] →visitedRoutes=[

[0163] {path:' / order / detail',query:{id:1001},...},

[0164] {path:' / order / detail',query:{id:1002},...} / / Add new ]

[0166] → Trigger watchEffect

[0167] → Call handleActivePath(route, true)

[0168] →Judgement: meta.dynamicNewTab===true

[0169] → Returns to " / order / detail?id=1002"

[0170] →routerKey=" / order / detail?id=1002" / / [Different key]

[0171] →keepAliveNameList=['OrderDetail']

[0172] →Keep-Alive uses key=" / order / detail?id=1002" to cache new component instances.

[0173] →At this point, there are two cache instances:

[0174] An example of -key=" / order / detail?id=1001" (order 1001).

[0175] An instance of -key=" / order / detail?id=1002" (order 1002) [Implementing multiple instances]

[0176] Step 4: The user switches between the two tabs.

[0177] User action: Click the "Order 1001" tab

[0178] → The route redirects to / order / detail?id=1001

[0179] →routerKey=" / order / detail?id=1001"

[0180] →Keep-Alive detected key=" / order / detail?id=1001"

[0181] →Reuse the cached instance (the data status of order 1001 is fully preserved) [Cache hit]

[0182] User action: Click the "Order 1002" tab

[0183] → The route redirects to / order / detail?id=1002

[0184] →routerKey=" / order / detail?id=1002"

[0185] →Keep-Alive detected key=" / order / detail?id=1002"

[0186] →Reuse the cached instance (the data status of order 1002 is fully preserved) [Cache hit]

[0187] Step 5: The user closes the order 1001 label.

[0188] User action: Click the close button on the Order 1001 label.

[0189] → Call delVisitedRoute(' / order / detail?id=1001')

[0190] →visitedRoutes=visitedRoutes.filter(r=>r.path!==' / order / detail?id=1001')

[0191] →visitedRoutes=[{path:' / order / detail',query:{id:1002},...}]

[0192] → Trigger watchEffect

[0193] → Recalculate keepAliveNameList

[0194] → Only includes the components corresponding to order 1002

[0195] →Keep-Alive detected a change in include.

[0196] → Destroy the cache instance for key=" / order / detail?id=1001" [Automatically clean up memory]

[0197] → Only retain cached instances with key=" / order / detail?id=1002".

[0198] While specific embodiments of the present invention have been described in detail by way of examples, those skilled in the art should understand that the examples are for illustrative purposes only and not intended to limit the scope of the invention. Those skilled in the art should understand that modifications can be made to the above embodiments without departing from the scope and spirit of the invention, and the same or similar technical features described in different embodiments can be referenced or combined with each other. The scope of the invention is defined by the appended claims.

Claims

1. A multi-level routing intelligent cache management method, characterized in that, include: Obtain tab operations, including opening a tab, closing a tab, and refreshing a tab; Obtain the route object of the current tab corresponding to the tab operation; When the tab operation is "open tab", the tags in the visited route array are updated according to the route object, including: determining whether to create the tag based on the metadata of the route object; if the tag is not created, the determination ends; if the tag is created, searching in the visited route array for a tag with the same actual path as the route object; if a tag with the same actual path as the route object exists, merging the attributes of the route object and the tag with the same actual path as the route object to complete the update of the tags in the visited route array; if no tag with the same actual path as the route object exists, creating the tag corresponding to the route object at the end of the visited route array to complete the update of the tags in the visited route array. When the tab operation is to close the tab, the tab corresponding to the route object is removed from the visited route array, thus completing the update of the visited route array; When the tab operation is to refresh the tab, save the route key of the route object, set the route key to an empty value, and render and destroy the page corresponding to the empty route key; traverse the visited route array, mark the tag corresponding to the route object in the visited route array as temporarily removed, and complete the update of the visited route array; update the cache list according to the updated visited route array; after the rendering and destruction are completed, restore the route key of the route object to a non-empty value, trigger the reloading of the route object, create a new tag in the visited route array according to the route object and replace the tag marked as temporarily removed corresponding to the route object, and complete the update of the visited route array; The cache list is updated based on the updated visited route array, including: providing an initialized cache list; traversing the updated visited route array and performing a cache determination on any tag in the visited route array, including: determining whether the tag is marked as permanently disabled for caching; if the tag is marked as permanently disabled for caching, skipping the tag; if the tag is not marked as permanently disabled for caching, determining whether the tag is marked as temporarily removed; if the tag is marked as temporarily removed, skipping the tag; if the tag is not marked as temporarily removed, storing the cache key of the route object corresponding to the tag in the cache list; and completing the update of the cache list after all tags in the updated visited route array have been determined.

2. The multi-level routing intelligent cache management method according to claim 1, characterized in that, Store the cache key of the route object corresponding to the tag into the cache list, including: Generate the cache key based on the route object corresponding to the tag, including: Determine whether there is matching data in the routing object corresponding to the label, wherein the matching data includes the actual path; If no matching data exists, the path of the routing object corresponding to the tag will be used as the original path; If the matching data exists, the actual path is used as the original path. It is determined whether the routing object corresponding to the tag contains a query parameter and whether the query parameter is not empty. If the query parameter does not exist and is not empty, the original path is used as the complete path. If the query parameter exists and is not empty, the query parameter and the original path are combined to form the complete path. Determine whether the route object corresponding to the tag is in tab mode; If it is not the tab mode, determine whether there is an activation menu in the route object corresponding to the tab; if the activation menu exists, use the activation menu as the cache key of the route object corresponding to the tab; if the activation menu does not exist, use the full path as the cache key of the route object corresponding to the tab. If it is the tabbed mode, determine whether a page tag exists; if the page tag exists, use the complete path as the cache key of the route object corresponding to the tag; if the page tag does not exist, use the original path as the cache key of the route object corresponding to the tag. Store the cache key in the cache list.

3. The multi-level routing intelligent cache management method according to claim 1, characterized in that, After merging the attributes of the tags that have the same path as the route object and the actual path of the route object to update the tags of the visited route array, or after creating the tag corresponding to the route object at the end of the visited route array to update the tags of the visited route array, the method further includes: Determine whether the visited route array contains the tag marked as disallowing closing; If a label indicating that closing is not allowed exists, the judgment ends; If there is no tag marked as not allowed to be closed, mark the tag corresponding to the route object in the visited route array as not allowed to be closed.

4. The multi-level routing intelligent cache management method according to claim 1, characterized in that, When the tab operation is to close the tab, the tab corresponding to the route object is removed from the visited route array, thus updating the visited route array, including: Determine whether the route object allows being closed; If closing is not allowed, the judgment ends; If closing is allowed, close the page corresponding to the route object, remove the tag corresponding to the route object from the visited route array, complete the update of the visited route array, and jump to the tab page corresponding to the tag adjacent to the tag corresponding to the route object in the visited route array.

5. The multi-level routing intelligent cache management method according to claim 1, characterized in that, When the tab operation is to refresh the tab, before saving the route key of the route object, the following is included: Determine whether to display the progress bar; If the progress bar is displayed, the progress component is invoked, and the progress component displays a progress animation on the page corresponding to the route object. If the progress bar is not displayed, the judgment ends.

6. The multi-level routing intelligent cache management method according to claim 5, characterized in that, After triggering the reloading of the route object, creating a new label in the visited route array based on the route object and replacing the label marked as temporarily removed corresponding to the route object, and completing the update of the visited route array, the process includes: The display progress animation will be turned off after a preset time period.

7. The multi-level routing intelligent cache management method according to claim 1, characterized in that, When the tab operation is to open a tab, or when the tab operation is to close a tab, after updating the cache list according to the updated accessed route array, the method further includes: Update the storage layer based on the updated cache list.

Images