Single-page application routing state caching method and system based on DAG structure

Abstract

This invention discloses a method and system for caching route state in a single-page application (SPA) based on a Directed Acyclic Graph (DAG) structure. The method includes: S1: Reading the SPA's route configuration table and constructing a singly linked list according to the original route definition order in the route configuration table; S2: Traversing each route in the route configuration table, reading its metadata tag field and path, obtaining the predecessor node relationship information, and constructing a DAG and a path mapping table with the path as the key, where the key points to the route information corresponding to the node in the DAG; S3: Initializing an empty cache mapping table based on the LRU algorithm, using the path as the key to store the virtual DOM node of the corresponding route; S4: Execution phase. This invention enables dynamic caching control based on route jump relationships.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, specifically to a method and system for caching routing state in single-page applications based on a DAG structure. Background Technology

[0002] Single-page applications (SPAs) are a modern web application architecture that improves user interaction smoothness by dynamically switching component views instead of page navigation. However, existing route state caching solutions have significant drawbacks: 1. Current mainstream front-end frameworks like Vue and React can statically control the caching of the virtual DOM through a "component name / route name whitelist," but cannot dynamically adjust whether caching is needed based on the route navigation direction (forward / backward); 2. The official routing framework VueRouter only provides static control over caching. The "forward" operation may load the cache (resulting in unupdated data), requiring manual handling by the developer; static caching requires long-term memory occupation to store unused component virtual nodes (VNodes), and frequent destruction / reconstruction increases CPU computational overhead; 3. In addition, manually handling route caching gradually exposes many disadvantages as the application complexity increases. For example, modifying the caching logic of each corresponding component (such as updating the storage / reading logic synchronously when adding fields) results in redundant code and is prone to omissions; when adjusting route relationships (such as adding intermediate pages or adjusting the navigation order), the caching rules need to be completely reconstructed, resulting in a huge workload; manual caching relies on the developer's subjective judgment of "which states need to be cached," which easily leads to cache omissions and state pollution. Summary of the Invention

[0003] The technical objective of this invention is to address the above-mentioned shortcomings by providing a single-page application route state caching method and system based on a DAG structure. This solves the core requirement of existing solutions to "refresh the view when moving forward and restore the cache when moving backward," and is a dynamic caching control scheme based on route jump relationships. In a first aspect, the present invention provides a single-page application routing state caching method based on a DAG structure, comprising the following steps: S1: Read the routing configuration table of the SPA and construct a singly linked list according to the original route definition order in the routing configuration table; S2: Traverse each route in the routing configuration table, read the metadata tag field and path, obtain the predecessor node relationship information, construct a DAG and a path mapping table with the path as the key based on the predecessor node relationship information, and the key points to the routing information corresponding to the node in the DAG; S3: Initialize an empty cache mapping table based on the LRU algorithm, using the path as the key, to store the virtual DOM nodes of the corresponding routes; S4: During the runtime phase, before route navigation, obtain the current route information and the target route information to be navigated to. Determine whether the root component corresponding to the current route information contains the isKeepAlivePageView tag. If it does, store the virtual DOM node corresponding to the current route information into the cache mapping table. First, determine whether the navigation direction from the current route to the target route is forward or backward based on the singly linked list and then the DAG. If it is forward, create a new root component for the target route and replace the root DOM with the newly created virtual DOM node tree. If it is backward, search for the virtual DOM node corresponding to the target route in the cache mapping table. If the corresponding virtual DOM node is found, retrieve the virtual DOM node from the cache mapping table and load it. If the corresponding virtual DOM node is not found, load a new component for the target route.

[0004] One optional approach is to construct a DAG in S2, including performing a validity test each time a path is added to the DAG; and handling errors if a path fails.

[0005] One optional approach is to further encapsulate the root routing component in step S3.

[0006] One optional approach is that, in step S4, the method of determining whether the jump direction from the current route to the target route is forward or backward based on the singly linked list and then on the DAG includes: first, comparing the path order of the current route and the target route in the singly linked list; if the order cannot be determined in the singly linked list, then querying the node relationships in the DAG for comparison; and determining whether the jump direction is forward or backward based on the comparison result.

[0007] One possible approach is that if the metadata of the target route information contains a predecessor node array and the path of the current route is located in that array, then the jump direction is directly determined to be forward; otherwise, the S4 step is executed to determine whether the jump direction from the current route to the target route is forward or backward based on the singly linked list and then the DAG.

[0008] One possible approach is that, in step S4, after loading a new component for the target route, if it is determined that caching is required when leaving the target route, the virtual DOM node corresponding to the target route is stored in the cache mapping table.

[0009] Secondly, the present invention provides a single-page application routing state caching system based on a DAG structure, comprising: Singly linked list creation module: used to read the routing configuration table of the SPA and construct a singly linked list according to the original route definition order of the routing configuration table; DAG creation module: used to traverse each route in the routing configuration table, read the metadata tag field and path, obtain the predecessor node relationship information, construct a DAG and a path mapping table with the path as the key based on the predecessor node relationship information, and the key points to the routing information corresponding to the node in the DAG; Cache pool creation module: used to initialize an empty cache mapping table based on the LRU algorithm, using the path as the key, to store the virtual DOM nodes of the corresponding routes; The execution module is used to obtain the current route information and the target route information before route navigation. It determines whether the root component corresponding to the current route information contains the `isKeepAlivePageView` tag. If it does, the virtual DOM node corresponding to the current route information is stored in the cache mapping table. It first uses the singly linked list and then the DAG to determine whether the navigation direction from the current route to the target route is forward or backward. If it is forward, a new root component is created for the target route, and the root DOM is replaced with the newly created virtual DOM node tree. If it is backward, the virtual DOM node corresponding to the target route is searched in the cache mapping table. If the corresponding virtual DOM node is found, it is retrieved from the cache mapping table and loaded. If the corresponding virtual DOM node is not found, a new component is loaded for the target route.

[0010] In another aspect, the present invention provides an electronic device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the computer program, implements the steps of the above-described single-page application routing state caching method based on a DAG structure.

[0011] In another aspect, the present invention provides a computer-readable storage medium comprising a computer program that, when executed by a processor, implements the steps of the above-described single-page application routing state caching method based on a DAG structure.

[0012] The single-page application routing state caching method and system based on DAG structure of the present invention has the following advantages: It constructs a DAG-based data model, enabling adaptation to complex routing relationships, supporting multiple predecessor / successor nodes, and accurately modeling mesh jumps in actual business scenarios. Compared to unidirectional linked lists, DAG reduces invalid storage through "path-granular caching." LRU caching optimizes cache storage and avoids invalid resource occupation. Finally, this solution standardizes the team development experience; developers do not need to concern themselves with caching details, and components automatically inherit "path-aware" caching capabilities, avoiding collaboration problems caused by "inconsistent caching logic" among team members. Attached Figure Description

[0013] To more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0014] The invention will be further described below with reference to the accompanying drawings.

[0015] Figure 1 This is a flowchart of a single-page application routing state caching method based on a DAG structure according to Embodiment 1 of the present invention; Figure 2 This is a flowchart illustrating the operation of the single-page application routing state caching method based on DAG structure according to Embodiment 1 of the present invention. Figure 3 This is a simplified DAG diagram according to Embodiment 1 of the present invention; Figure 4 This is a logical structure block diagram of a single-page application routing state caching system based on a DAG structure according to Embodiment 2 of the present invention; Figure 5 This is the structural framework of a single-page application routing state caching system based on a DAG structure according to Embodiment 2 of the present invention. Detailed Implementation

[0016] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, so that those skilled in the art can better understand and implement the present invention. However, the embodiments are not intended to limit the present invention. In the absence of conflict, the embodiments of the present invention and the technical features in the embodiments can be combined with each other.

[0017] It should be understood that in the description of the embodiments of the present invention, terms such as "first" and "second" are used only for descriptive purposes and should not be construed as indicating or implying relative importance, nor as indicating or implying order. In the embodiments of the present invention, "multiple" refers to two or more.

[0018] In this embodiment of the invention, "and / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, B existing alone, or both A and B existing simultaneously. Furthermore, in this document, the character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0019] Definitions: DAG (Directed Acyclic Graph): In a directed graph, if there exists a vertex from which one cannot return to that vertex by following a number of edges, then the graph is called a directed acyclic graph. Example

[0020] like Figure 1 and Figure 2 As shown, the single-page application routing state caching method based on DAG structure provided in this embodiment specifically involves routing management and component state caching technology for single-page applications (SPAs). It is particularly suitable for complex interaction scenarios of front-end pages, and SPA scenarios that need to simulate the "refresh when moving forward, cache when moving backward" interaction experience of native APPs.

[0021] This embodiment provides a single-page application routing state caching method based on a DAG structure, which may include the following steps: S1: Read the SPA's routing configuration table and construct a singly linked list according to the original route definition order in the routing configuration table.

[0022] The construction phase sequentially completes three task queues: route initialization, building a directed acyclic graph (DAG) of routes, and building a cache pool. This step involves initializing routes and building a singly linked list.

[0023] The initialization routing phase reads the SPA's routing configuration table, such as the route array of VUE Router or React Router, for subsequent construction. The construction phase is divided into two parts. One part constructs nodes in a singly linked list according to the original route definition order, i.e., the order of the routing configuration table, such as / home (homepage) → / list (list page) → / detail (detail page). The other part reads the metadata (meta) tag fields in the routing configuration table. Below is a common JSON format, where the predecessor node field contains all its predecessor nodes.

[0024] { path:' / list', name:'list', component:ListPage, meta:{ predecessor:['auth','home'] } } S2: Traverse each route in the routing configuration table, read its metadata tag field and path, obtain the predecessor node relationship information, and construct a DAG and a path mapping table with the path as the key based on the predecessor node relationship information. The key points to the routing information corresponding to the node in the DAG. This step is the DAG construction task.

[0025] When constructing a DAG, the following steps are taken: Perform validity testing each time a path is added to the DAG; handle errors if they fail. Verify that the added paths conform to the relevant rules and requirements of the DAG to ensure the rationality and correctness of the entire graph structure.

[0026] After traversing the routes, a DAG (Directed Acyclic Graph) and a Map (Map) with the paths as keys are generated during the construction phase. During the traversal, a validity test is performed every time a path is added to the DAG to prevent graph structure deformation and maintain code robustness; if a path fails, a code warning can be issued or program execution can be stopped to remind the developer to handle the issue.

[0027] like Figure 3 The image shows a simple DAG example. First, a singly linked list is built based on the existing order. Then, the meta tags are retrieved, and a directed acyclic graph (DAG) is constructed based on this. Based on this, an efficient comparison algorithm can be implemented to determine the order of old and new routes, achieving fast comparison during runtime. For SPA applications, most scenarios are simple (i.e., simple ordering), so determining the order of routes can mostly be done by retrieving them from the singly linked list, achieving a fast order in O(n) time. If the old and new route paths cannot be found in the singly linked list, then the meta tags are queried for finer-grained comparison. This approach has significant advantages compared to general DAG-based comparison algorithms.

[0028] S3: Initialize an empty cache mapping table based on the LRU algorithm, using the path as the key, to store the virtual DOM nodes of the corresponding routes. This step is the task of building the cache pool.

[0029] During the cache building phase, a cache map is initialized, with paths as keys. It's designed based on the LRU algorithm to prevent system crashes caused by caching too many virtual DOM nodes (vNodes). In practice, the root route is typically wrapped; for example, in the Vue framework, the Router View is treated specially; and in the React framework, the Router Provider is treated specially. This embodiment provides a general solution and is not limited to any particular framework.

[0030] S4: During the runtime phase, before route navigation, obtain the current route information and the target route information to navigate to. Determine whether the root component corresponding to the current route information contains the isKeepAlivePageView tag. If it does, store the virtual DOM node corresponding to the current route information into the cache mapping table. Use the method of first determining the singly linked list and then the DAG to determine whether the navigation direction from the current route to the target route is forward or backward. If it is forward, create a new root component for the target route and load it, replacing the root DOM with the newly created virtual DOM node tree. If it is backward, search for the virtual DOM node corresponding to the target route in the cache mapping table. If the corresponding virtual DOM node is found, retrieve the virtual DOM node from the cache mapping table and load it. If the corresponding virtual DOM node is not found, load a new component for the target route.

[0031] If the target route's metadata contains a predecessor node array, and the current route's path is within that array, then the jump direction is directly determined to be forward; otherwise, the process in S4 utilizes a singly linked list followed by a Directed Acyclic Graph (DAG) to determine whether the jump direction from the current route to the target route is forward or backward. In S4, this process involves: first comparing the path order of the current route and the target route in the singly linked list; if the order cannot be determined in the singly linked list, then querying the node relationships in the DAG for comparison; and finally determining the jump direction as forward or backward based on the comparison result. After loading a new component for the target route, if caching is required when leaving the target route, the virtual DOM node corresponding to that target route is stored in the cache mapping table.

[0032] After initialization during the construction phase, a route DAG, a route order comparison algorithm, and its cache pool are generated. The runtime phase includes four core decisions. The implementation details of the runtime phase will be discussed below using a specific route jump as an example. Figure 2 As shown.

[0033] Before a route jump, a route guard is triggered. During this phase, the current route information (hereinafter referred to as Route_A) and the target route information to which the route is about to jump (hereinafter referred to as Route_B) are obtained.

[0034] First, determine whether the root component corresponding to Route_A contains the isKeepAlivePageView (whether to keep the page view) tag. If the tag is true, execute the caching logic for the current route; otherwise, do not cache. The advantage of this step is that not all components need to be cached. If the flag is explicitly declared and only the components that need to be cached are set to true, the comparison logic can be greatly reduced and the code readability can be increased.

[0035] Next, the path information in Route_B is read, and the meta information is indirectly obtained through the path information. If the meta tag contains the predecessor node array, a comparison is performed. If the path in Route_A is in the predecessor node array, the next step is directly executed to achieve fast comparison; otherwise, the comparison algorithm of this embodiment is executed to determine the order of the path in Route_A and the path in Route_B. If the path in Route_A comes first, it means that the order is consistent and the page jumps forward; otherwise, it means that the order is reversed and the page jumps back.

[0036] The comparison in the previous stage accurately determined whether the current navigation was a "forward" or "backward" scenario. Next, different processing will be performed for each scenario. If it's "forward," a new root component is created and loaded directly, the root DOM is replaced with the newly created vNode, and loading is complete. If it's "backward," the path will be used to determine if the current route is cached. If it is, the component is retrieved from the cache and loaded, and subsequent logic is executed until loading is complete. If the cache is not hit, a new route component is loaded, and the same logic as for "forward" is executed.

[0037] In most "back" scenarios, the cache will be hit. However, if the user executes refresh logic during this process, the cache pool will be reset, and the vNode will not be available when returning. It is precisely because of the DAG-based design that "forward" and "backward" operations can still be accurately identified even if the user refreshes continuously, which has a significant advantage over the currently known implementation logic in the industry.

[0038] This embodiment establishes a "Directed Acyclic Graph (DAG)" during the construction phase, using a graph structure to model complex routing relationships and manage the routing relationship table in a structured way. During the runtime phase, it implements "path awareness," dynamically controlling caching based on direction recognition to achieve the effect of "refreshing when moving forward and storing cache when moving backward." This solves the problem in single-page applications where the virtual DOM caching of components cannot be intelligently controlled based on the route navigation direction (forward / backward), leading to poor user experience and wasted performance. Furthermore, it brings significant value from the dimensions of "team collaboration efficiency, development standardization, and maintenance costs," especially improving the consistent development experience within the team, unifying development standards, reducing troubleshooting difficulty, and improving collaboration efficiency. Example

[0039] like Figure 4 and Figure 5 As shown, the single-page application routing state caching system based on DAG structure provided in this embodiment is a system corresponding to the single-page application routing state caching method based on DAG structure in Embodiment 1, including: a singly linked list creation module, a DAG creation module, a cache pool creation module, and a running module.

[0040] Singly linked list creation module: used to read the routing configuration table of the SPA and construct a singly linked list according to the original route definition order of the routing configuration table.

[0041] DAG creation module: used to traverse each route in the routing configuration table, read the metadata tag field and path, obtain the predecessor node relationship information, construct a DAG and a path mapping table with the path as the key based on the predecessor node relationship information, and the key points to the routing information corresponding to the node in the DAG.

[0042] Cache pool creation module: Used to initialize an empty cache mapping table based on the LRU algorithm, using the path as the key, to store the virtual DOM nodes of the corresponding routes.

[0043] The execution module is used to obtain the current route information and the target route information before route navigation. It determines whether the root component corresponding to the current route information contains the `isKeepAlivePageView` tag. If it does, the virtual DOM node corresponding to the current route information is stored in the cache mapping table. It first uses the singly linked list and then the DAG to determine whether the navigation direction from the current route to the target route is forward or backward. If it is forward, a new root component is created for the target route, and the root DOM is replaced with the newly created virtual DOM node tree. If it is backward, the virtual DOM node corresponding to the target route is searched in the cache mapping table. If the corresponding virtual DOM node is found, it is retrieved from the cache mapping table and loaded. If the corresponding virtual DOM node is not found, a new component is loaded for the target route.

[0044] The DAG creation module generates path-based routing DAGs and path-based routing maps. The DAG is used for fast direction identification, and the map is used for fast reading of routing nodes. Each node in the constructed routing DAG contains a route identifier, a predecessor node mapping table, a successor node mapping table, and a path. A direction identification algorithm is implemented based on the predecessor / successor relationships of nodes in the DAG to determine whether the jump direction is forward or backward.

[0045] The runtime phase implements vNode caching and cache node reuse, with the caching process occurring during runtime. Fast direction recognition is optimized based on the general DAG algorithm. It first compares data using a singly linked list; if an invalid comparison occurs, it then reads the meta tag, improving computational efficiency. The runtime module first reads the root component's `isKeepAlivePageView` tag. Only when the tag is true is the caching logic executed; otherwise, no caching occurs. This tag design significantly optimizes caching logic comparisons, improving overall architecture execution efficiency. Furthermore, explicit configuration improves code readability and team collaboration efficiency. During runtime, when navigating routes, only components with a true tag are cached. The cache pool uses the path as a unique key to cache the vNode of the current route; the cache also uses an LRU design to avoid resource waste. Before a route navigator, a comparison algorithm is executed to determine whether to "go forward" or "go back." If "go forward," a new component is loaded; if "go back," the component is retrieved from the cache pool. If the component is found in the cache pool, it is loaded; otherwise, a new component is loaded. This embodiment is not limited to a specific framework; the algorithmic ideas can be applied to any framework such as Vue and React, making it a universal solution. Example

[0046] An electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the single-page application routing state caching method based on a DAG structure of Embodiment 1. Example

[0047] A computer-readable storage medium includes a computer program that, when executed by a processor, implements the steps of the single-page application routing state caching method based on a DAG structure in Embodiment 1.

[0048] The single-page application routing state caching method and system based on a DAG structure according to the present invention have been described above by way of example with reference to the accompanying drawings. However, those skilled in the art should understand that various modifications can be made to the single-page application routing state caching method and system based on a DAG structure proposed in the present invention without departing from the scope of the invention. Therefore, the scope of protection of the present invention should be determined by the content of the appended claims.

Claims

1. A method for caching routing state in a single-page application based on a DAG structure, characterized in that, Includes the following steps: S1: Read the routing configuration table of the SPA and construct a singly linked list according to the original route definition order in the routing configuration table; S2: Traverse each route in the routing configuration table, read the metadata tag field and path, obtain the predecessor node relationship information, construct a DAG and a path mapping table with the path as the key based on the predecessor node relationship information, and the key points to the routing information corresponding to the node in the DAG; S3: Initialize an empty cache mapping table based on the LRU algorithm, using the path as the key, to store the virtual DOM nodes of the corresponding routes; S4: During the runtime phase, before route navigation, obtain the current route information and the target route information to be navigated to. Determine whether the root component corresponding to the current route information contains the isKeepAlivePageView tag. If it does, store the virtual DOM node corresponding to the current route information into the cache mapping table. First, determine whether the navigation direction from the current route to the target route is forward or backward based on the singly linked list and then the DAG. If it is forward, create a new root component for the target route and replace the root DOM with the newly created virtual DOM node tree. If it is backward, search for the virtual DOM node corresponding to the target route in the cache mapping table. If the corresponding virtual DOM node is found, retrieve the virtual DOM node from the cache mapping table and load it. If the corresponding virtual DOM node is not found, load a new component for the target route.

2. The single-page application routing state caching method based on DAG structure according to claim 1, characterized in that, In S2, constructing a DAG includes: performing a validity test each time a path is added to the DAG; and handling errors if a path fails.

3. The single-page application routing state caching method based on DAG structure according to claim 1, characterized in that, In S3, the root routing component is also packaged.

4. The single-page application routing state caching method based on DAG structure according to claim 1, characterized in that, In step S4, determining whether the jump direction from the current route to the target route is forward or backward based on the singly linked list and then the DAG includes: first comparing the path order of the current route and the target route in the singly linked list; if the order cannot be determined in the singly linked list, querying the node relationship in the DAG for comparison; and determining whether the jump direction is forward or backward based on the comparison result.

5. The single-page application routing state caching method based on DAG structure according to claim 4, characterized in that, If the metadata of the target route information contains a predecessor node array, and the path of the current route is located in that array, then the jump direction is directly determined to be forward; otherwise, the process in S4 is executed, which first uses the singly linked list and then the DAG to determine whether the jump direction from the current route to the target route is forward or backward.

6. The single-page application routing state caching method based on DAG structure according to claim 1, characterized in that, In S4, after loading a new component for the target route, if it is determined that caching is needed when leaving the target route, the virtual DOM node corresponding to the target route is stored in the cache mapping table.

7. A single-page application routing state caching system based on a DAG structure, characterized in that, include: Singly linked list creation module: used to read the routing configuration table of the SPA and construct a singly linked list according to the original route definition order of the routing configuration table; DAG creation module: used to traverse each route in the routing configuration table, read the metadata tag field and path, obtain the predecessor node relationship information, construct a DAG and a path mapping table with the path as the key based on the predecessor node relationship information, and the key points to the routing information corresponding to the node in the DAG; Cache pool creation module: used to initialize an empty cache mapping table based on the LRU algorithm, using the path as the key, to store the virtual DOM nodes of the corresponding routes; The execution module is used to obtain the current route information and the target route information before route navigation. It determines whether the root component corresponding to the current route information contains the `isKeepAlivePageView` tag. If it does, the virtual DOM node corresponding to the current route information is stored in the cache mapping table. It first uses the singly linked list and then the DAG to determine whether the navigation direction from the current route to the target route is forward or backward. If it is forward, a new root component is created for the target route, and the root DOM is replaced with the newly created virtual DOM node tree. If it is backward, the virtual DOM node corresponding to the target route is searched in the cache mapping table. If the corresponding virtual DOM node is found, it is retrieved from the cache mapping table and loaded. If the corresponding virtual DOM node is not found, a new component is loaded for the target route.

8. An electronic device comprising: A memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, when the processor executes the computer program, it implements the steps of the single-page application routing state caching method based on a DAG structure as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a computer program that, when executed by a processor, implements the steps of the single-page application routing state caching method based on a DAG structure as described in any one of claims 1 to 6.

Images