Single-page application routing method and device, computer equipment and storage medium

Abstract

The invention relates to the technical field of single-page applications, and discloses a single-page application routing method and device, computer equipment and a storage medium, and the method comprises the following steps: capturing a click event in response to a click operation of a user on a single-page application; if the click event is page jump, obtaining routing information and routing parameters of the current page, and storing the obtained information to a routing information mapping table; acquiring a routing name of the to-be-jumped page from the click event, and jumping to the to-be-jumped page based on the routing name; if the click event is that page rollback is carried out after the current page is refreshed, obtaining a routing name of the page to be rollback from the click event; based on the routing name, matching routing information and routing parameters of the page to be fallback from a routing information mapping table; and if the routing information and the routing parameters of the page to be fallback are matched from the routing information mapping table, fallback to the page to be fallback based on the matched routing information and routing parameters. According to the method and the device, the display error of the to-be-fallback page is avoided.

Description

Technical Field

[0001] The present invention relates to the technical field of single-page application, and in particular to a single-page application routing method, device, computer equipment and storage medium. Background Art

[0002] Single Page Application (SPA) provides a smooth user experience by dynamically updating a single Hyper Text Markup Language (HTML) page. The core of SPA is to achieve page jump and content update without refreshing the entire page. This application model relies on front-end routing technology, allowing users to navigate within the application without reloading the page.

[0003] The routing information of single-page applications is usually managed by the front-end routing library, including paths and corresponding components. The routing of single-page applications is implemented based on routing information and routing parameters. The routing of single-page applications includes page jumps, page rollbacks, etc. The routing information and routing parameters used in the routing process can be saved in the browser history or managed through the global state management library.

[0004] However, when the page is refreshed and then rolled back, the page to be rolled back may display an error because the page refresh causes the browser's history or the routing parameters of the page to be rolled back in the global state management library to be lost. Summary of the invention

[0005] In view of this, the present invention provides a single-page application routing method, apparatus, computer equipment and storage medium to solve the problem in the related art that when a page is refreshed and then a page rollback operation is performed, the routing parameters of the page to be rolled back in the browser's history record or the global status management library are lost due to the refresh of the page, which will cause the page to be rolled back to be displayed incorrectly.

[0006] In a first aspect, the present invention provides a single-page application routing method, the method comprising:

[0007] In response to a user's click operation on the single-page application, capturing a click event corresponding to the click operation;

[0008] In the case where the click event is a page jump, obtaining the routing information and routing parameters of the current page, and saving the routing information and routing parameters of the current page to a routing information mapping table;

[0009] Acquire the route name of the page to be jumped from the click event, and jump to the page to be jumped based on the route name of the page to be jumped;

[0010] In the case where the click event is to refresh the current page and then roll back the page, the route name of the page to be rolled back is obtained from the click event;

[0011] Based on the routing name of the page to be rolled back, matching the routing information and routing parameters of the page to be rolled back from the routing information mapping table;

[0012] If the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table, roll back to the page to be rolled back based on the matched routing information and routing parameters of the page to be rolled back.

[0013] The single-page application routing method provided in this embodiment obtains the routing information and routing parameters of the current page when the click event is a page jump, and saves the routing information and routing parameters of the current page to the routing information mapping table, ensuring that the page can be rolled back later through the routing information mapping table. In the case where the click event is to refresh the current page and then roll back the page, the routing name of the page to be rolled back is obtained from the click event, and based on the routing name of the page to be rolled back, the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table. If the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table, then based on the matched routing information and routing parameters of the page to be rolled back, roll back to the page to be rolled back. This solves the problem that refreshing the page causes the routing parameters of the page to be rolled back in the browser's history or global state management library to be lost, resulting in an error in the display of the page to be rolled back, and ensures the accuracy of the displayed page to be rolled back.

[0014] In an optional embodiment, the method further includes:

[0015] When the click event is to refresh the current page, the route name of the current page is obtained from the click event;

[0016] Based on the route name of the current page, matching the route information and route parameters of the current page from the route information mapping table;

[0017] If the routing information and routing parameters of the current page are matched from the routing information mapping table, the current page is refreshed based on the matched routing information and routing parameters of the current page.

[0018] The single-page application routing method provided in this embodiment obtains the routing name of the current page from the click event when the click event is to refresh the current page. If the routing information and routing parameters of the current page are matched from the routing information mapping table based on the routing name of the current page, the current page can be refreshed according to the matched routing information and routing parameters of the current page, thereby achieving accurate refresh of the current page.

[0019] In an optional embodiment, the method further includes:

[0020] If the routing information and routing parameters of the current page are not matched in the routing information mapping table, obtaining the routing parameters of the current page from the click event;

[0021] Based on the route name of the current page, matching the route information of the current page from a preset route table;

[0022] Based on the route name of the current page, saving the route parameters and route information of the current page to the route information mapping table;

[0023] Refresh the current page based on the routing parameters and routing information of the current page.

[0024] The single-page application routing method provided in this embodiment obtains the routing parameters and routing information of the current page when the routing information and routing parameters of the current page are not matched in the routing information mapping table, and saves the routing parameters and routing information of the current page to the routing information mapping table so as to facilitate subsequent query during page refresh and page rollback, thereby ensuring accurate display of the page.

[0025] In an optional implementation, when the click event is a page jump, obtaining the routing information and routing parameters of the current page, and saving the routing information and routing parameters of the current page to a routing information mapping table includes:

[0026] When the click event is to jump to a page, obtain the route name of the current page;

[0027] Based on the route name of the current page, matching the route information and route parameters of the current page from the route information mapping table;

[0028] If the routing information and routing parameters of the current page are not matched in the routing information mapping table, obtaining the routing parameters of the current page from the click event;

[0029] Based on the route name of the current page, match the route information of the current page from the preset route table;

[0030] Based on the route name of the current page, the route information and route parameters of the current page are saved in a route information mapping table.

[0031] The single-page application routing method provided in this embodiment obtains the routing information and routing parameters of the current page when the routing information and routing parameters of the current page are not matched in the routing information mapping table, and saves the routing information and routing parameters of the current page to the routing information mapping table, thereby ensuring the accuracy of subsequent single-page application routing.

[0032] In an optional implementation, the step of jumping to the page to be jumped to based on the routing name of the page to be jumped to comprises:

[0033] Based on the routing name of the page to be redirected, matching the routing information of the page to be redirected from a preset routing table;

[0034] Obtaining the routing parameters of the page to be redirected from the click event;

[0035] Based on the routing information and routing parameters of the page to be jumped, jump to the page to be jumped.

[0036] The single-page application routing method provided in this embodiment matches the routing information of the page to be jumped from the preset routing table, obtains the routing parameters of the page to be jumped from the click event, and jumps to the page to be jumped based on the routing information and routing parameters of the page to be jumped, thereby ensuring that the jumped page is correct.

[0037] In an optional implementation, the step of jumping to the page to be jumped to based on the routing information and routing parameters of the page to be jumped to includes:

[0038] Based on the path information of the page to be redirected and the routing parameters of the page to be redirected, the address bar is updated;

[0039] Load the component corresponding to the page to be jumped to, and jump to the page to be jumped to;

[0040] The routing information of the page to be redirected includes the path information of the page to be redirected and the component corresponding to the page to be redirected.

[0041] The single-page application routing method provided in this embodiment loads the component corresponding to the page to be jumped to through the path information and routing parameters of the page to be jumped to, thereby accurately jumping to the page to be jumped to.

[0042] In an optional embodiment, the method further includes:

[0043] If the routing information of the page to be redirected is not matched in the preset routing table, a predefined error page is displayed.

[0044] The single-page application routing method provided in this embodiment displays a predefined error page when the routing information of the page to be jumped to is not matched in the preset routing table, which can clearly convey to the user the reason why the current request cannot be completed, thereby improving the user experience.

[0045] In a second aspect, the present invention provides a single-page application routing device, the device comprising:

[0046] A capture module, used to respond to a user's click operation in the single-page application and capture a click event corresponding to the click operation;

[0047] A first acquisition module, used for acquiring routing information and routing parameters of the current page when the click event is page jump, and saving the routing information and routing parameters of the current page to a routing information mapping table;

[0048] A jump module, used for obtaining the routing name of the page to be jumped from the click event, and jumping to the page to be jumped based on the routing name of the page to be jumped;

[0049] A second acquisition module is used to acquire the route name of the page to be rolled back from the click event when the click event is to refresh the current page and then roll back the page;

[0050] A first matching module, configured to match the routing information and routing parameters of the page to be rolled back from the routing information mapping table based on the routing name of the page to be rolled back;

[0051] The fallback module is used to fall back to the page to be fallen back based on the matched routing information and routing parameters of the page to be fallen back if the routing information and routing parameters of the page to be fallen back are matched from the routing information mapping table.

[0052] In a third aspect, the present invention provides a computer device, comprising: a memory and a processor, the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the single-page application routing method of the first aspect or any corresponding embodiment thereof by executing the computer instructions.

[0053] In a fourth aspect, the present invention provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the single-page application routing method of the first aspect or any corresponding embodiment thereof.

[0054] In a fifth aspect, the present invention provides a computer program product, including computer instructions, which are used to enable a computer to execute the single-page application routing method of the above-mentioned first aspect or any corresponding embodiment thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0055] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the related technologies, the drawings required for use in the specific embodiments or the related technical descriptions will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0056] Figure 1 It is a flowchart of single page application routing in related technologies;

[0057] Figure 2 is a flow chart of a single-page application routing method according to an embodiment of the present invention;

[0058] Figure 3 is a flow chart of another single page routing method according to an embodiment of the present invention;

[0059] Figure 4 is a flow chart of another single page application routing method according to an embodiment of the present invention;

[0060] Figure 5 is a structural block diagram of a single-page application routing device according to an embodiment of the present invention;

[0061] Figure 6 It is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0062] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0063] A single-page application is a web application model that provides a smooth user experience by loading an HTML page and then dynamically updating the page content through JavaScript as the user interacts with the application without reloading the entire page. In other words, the core of this model is to allow users to interact with the page without refreshing the entire page.

[0064] Single-page application routing refers to the technology of page jump and content update in single-page application without reloading the entire page, which speeds up the page response speed and provides a better experience for users.

[0065] Among them, common single-page application routing implementation methods include CSS-based positioning, JavaScript-based hash value changes, and Web API-based methods such as the History API.

[0066] The routing of a single-page application involves the following aspects:

[0067] Front-end routing libraries / frameworks, such as React Router, Vue Router, Angular Router, etc., are used to manage and respond to changes in Uniform Resource Locators (URLs) in single-page applications.

[0068] Route matching, the route information includes the path (Path), route name and corresponding component (Component or View). The front-end routing library will match the current URL with the defined routing rules and load the corresponding component.

[0069] URL updates without refresh, and the browser history is dynamically modified and routing logic is processed through JavaScript to achieve page component replacement without refresh.

[0070] It should be noted that the routing information of a single-page application usually refers to the method used to handle client navigation within the application. In a single-page application, the routing information and routing parameters of the single-page application are usually managed by the front-end routing library, that is, the front-end JavaScript framework (such as React Router, Vue Router, etc.). Specifically, when a user accesses the URL of the application, the front-end routing library framework compares the predefined routing information to decide which component to render. The predefined routing information is set in the preset routing table.

[0071] Routes are mappings that connect URLs to specific components or views within your application. In single-page applications, routes are usually defined in a centralized way, such as in a routing configuration file.

[0072] Some routes may include route parameters, which are used to dynamically determine how data is presented. For example, a product details page may have a route / product / :id, where :id is a route parameter used to retrieve the corresponding details from a product list.

[0073] The routing of a single-page application is implemented based on routing information and routing parameters. The routing of a single-page application includes page jump, page rollback, page refresh, etc. The single-page application implements the routing of a single-page application by changing the hash value of the URL or directly modifying the path information (Path) of the URL without reloading the page.

[0074] The routing information and routing parameters used in the routing process can be saved in the browser history. However, when you refresh a new page after jumping to a new page, the routing parameters of the previous page will be lost. When you return to the previous page after refreshing the page, the loss of routing parameters will cause an interface error in the page to be returned, which will lead to display errors or page opening failures.

[0075] The routing information and routing parameters used in the routing process can also be saved in the global state management library. For example, in React, you can use Redux or Mobx to manage the global state of the application to save routing information and routing parameters. However, when you refresh a new page after jumping to a new page, the global state management library will also be rebuilt, which will cause the previously saved routing parameters to be lost. When the page is refreshed and then returned to the previous page, the route parameters are lost, which will cause the interface of the page to be returned to to be wrong, which will lead to display errors or page opening failures.

[0076] Figure 1 This is a flowchart of single page application routing in related technologies. Figure 1 As shown, in response to a user's click operation, the single-page application jumps from page A to page B. In response to a user's click operation or a copy operation, page B is refreshed or a link of page B is copied and reopened. After page B is refreshed or a link of page B is copied and reopened, in response to a user's click operation, a back page operation is performed, that is, back to page A. However, since after refreshing page B or copying the link of page B, the routing parameters and other information of the previous page are lost, that is, the routing parameters and other information of page A are lost, after the back page operation is performed, an interface error or even a page opening failure may occur after the page is opened.

[0077] That is to say, after page A jumps to page B, after refreshing page B or copying the link of page B to reopen it, when it returns to page A, the routing parameter information of page A may be lost, which may cause the interface of page A to report an error or even fail to open the page.

[0078] The embodiment of the present invention provides a single-page application routing method, which obtains the routing information and routing parameters of the current page when the click event is a page jump, and saves the routing information and routing parameters of the current page to a routing information mapping table, so as to ensure that the page can be rolled back later through the routing information mapping table. In the case where the click event is to roll back the page after refreshing the current page, the routing name of the page to be rolled back is obtained from the click event, and the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table based on the routing name of the page to be rolled back. If the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table, then based on the matched routing information and routing parameters of the page to be rolled back, roll back to the page to be rolled back, so as to solve the problem that the page refresh causes the browser's history or the routing parameters of the page to be rolled back in the global state management library to be lost, resulting in the display error of the page to be rolled back, that is, the page fails to open or the interface has an error, so as to ensure the accuracy of the displayed page to be rolled back.

[0079] According to an embodiment of the present invention, a single-page application routing method embodiment is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0080] In this embodiment, a single-page application routing method is provided, which can be used in a routing system module of a single-page application. Figure 2 is a flow chart of a single page application routing method according to an embodiment of the present invention. Figure 2 As shown, the process includes the following steps:

[0081] Step S201 , in response to a user's click operation on a single-page application, capturing a click event corresponding to the click operation.

[0082] Among them, the user can click a link or button on the single-page application, and the front-end routing library / framework (such as React Router, Vue Router, etc.) of the routing system module captures the click event corresponding to the click operation.

[0083] Step S202: when the click event is page jump, obtain the routing information and routing parameters of the current page, and save the routing information and routing parameters of the current page into the routing information mapping table.

[0084] Among them, when the click event is to jump to a page, before the jump, the page before the page jump is used as the current page, and the routing information and routing parameters of the current page are saved in the routing information mapping table, so that when the page is subsequently rolled back or refreshed, that is, when the page is reopened, the saved routing information and routing parameters can be queried from this routing information mapping table for use.

[0085] The routing information mapping table includes a mapping relationship between routing names and corresponding routing information and routing parameters.

[0086] Routing information includes routing name, path information and components. Routing information can be obtained from the routing system module and used when the page jumps. It should be noted that whether to use the routing information and routing parameters in the routing information mapping table when jumping, this Boolean value can be used to determine whether to use the routing information and routing parameters in the routing information mapping table for jumping according to the business logic of the current page.

[0087] The route name can be obtained from the routing system module and is unique. It will be used as the key value for searching the routing information mapping table later.

[0088] The routing parameters can be obtained from the click event, and will be placed after the path information (path) for splicing when the page jumps subsequently so that they can be used in the interface of the page.

[0089] It should be noted that the routing information mapping table is stored in the cache, where the key value in the table is the routing name, because the routing name is unique. Before the page jumps, the routing information mapping table can be queried from the cache.

[0090] Step S203, obtaining the routing name of the page to be jumped to from the click event, and jumping to the page to be jumped to based on the routing name of the page to be jumped to.

[0091] Among them, when the click event is for page jump, after the routing information and routing parameters of the page before the jump are saved in the routing information mapping table, the routing name of the page to be jumped is obtained from the click event, and based on the routing name of the page to be jumped, jump to the page to be jumped.

[0092] Step S204, when the click event is to refresh the current page and then roll back the page, obtain the route name of the page to be rolled back from the click event.

[0093] Among them, the click event is to refresh the current page and then roll back the page. It is generally believed that after a page jumps to the current page, the current page is refreshed and then rolled back.

[0094] Refreshing the current page can be achieved by clicking a refresh button, or by re-entering the link address of the current page in the browser address bar to jump and refresh the current page.

[0095] Step S205 , based on the routing name of the page to be rolled back, matching the routing information and routing parameters of the page to be rolled back from the routing information mapping table.

[0096] To ensure the display accuracy of the page to be rolled back, the routing information mapping table is obtained from the cache, and the routing name of the page to be rolled back is used as the key value to match the routing information and routing parameters of the page to be rolled back in the routing information mapping table.

[0097] Step S206: If the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table, roll back to the page to be rolled back based on the matched routing information and routing parameters of the page to be rolled back.

[0098] It can be understood that, since the routing information and routing parameters of the current page, i.e. the page before the jump, have been saved in the routing information mapping table before the page jumps, therefore, when the page is refreshed for rollback after the jump, according to the routing name of the page to be rolled back, under normal circumstances, the routing information and routing parameters of the page to be rolled back can definitely be matched from the routing information mapping table, and then, according to the matched routing information and routing parameters of the page to be rolled back, roll back to the page to be rolled back.

[0099] The single-page application routing method provided in this embodiment obtains the routing information and routing parameters of the current page when the click event is page jump, saves the routing information and routing parameters of the current page to the routing information mapping table, obtains the routing information and routing parameters of the current page through the routing system module before the page jump, and saves the routing information and routing parameters of the current page to the routing information mapping table, ensuring that the page can be rolled back later through the routing information mapping table. In the case where the click event is to refresh the current page and then roll back the page, the routing name of the page to be rolled back is obtained from the click event, and the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table based on the routing name of the page to be rolled back. If the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table, then the page to be rolled back is rolled back based on the matched routing information and routing parameters of the page to be rolled back. The problem that the page to be rolled back is displayed incorrectly, i.e., the page fails to open or the interface fails, etc., caused by the loss of the routing parameters of the page to be rolled back in the browser's history or global state management library due to refreshing the page is solved, and the accuracy of the displayed page to be rolled back is ensured.

[0100] In this embodiment, a single-page application routing method is provided, which can be used in a routing system module of a single-page application. Figure 3is a flow chart of a single page application routing method according to an embodiment of the present invention. Figure 3 As shown, the process includes the following steps:

[0101] Step S301: In response to a user's click operation on a single-page application, a click event corresponding to the click operation is captured. Figure 2 Step S201 of the illustrated embodiment will not be described in detail here.

[0102] Step S302: when the click event is page jump, obtain the routing information and routing parameters of the current page, and save the routing information and routing parameters of the current page into the routing information mapping table.

[0103] Specifically, the above step S302 includes:

[0104] Step S3021, when the click event is to jump to a page, obtain the route name of the current page.

[0105] Step S3022: Based on the routing name of the current page, the routing information and routing parameters of the current page are matched from the routing information mapping table.

[0106] Step S3023: if the routing information and routing parameters of the current page are not matched in the routing information mapping table, the routing parameters of the current page are obtained from the click event.

[0107] Step S3024, based on the routing name of the current page, matching the routing information of the current page from the preset routing table.

[0108] The preset routing table includes the mapping relationship between all routing names and their corresponding routing information in the single-page application.

[0109] Step S3025: Based on the route name of the current page, save the route information and route parameters of the current page to the route information mapping table.

[0110] Among them, if the routing information and routing parameters of the current page are not matched in the routing information mapping table, the routing information and routing parameters of the current page are obtained, and the routing information and routing parameters of the current page are saved in the routing information mapping table for subsequent page jumps, page rollbacks, and page refreshes.

[0111] It can be understood that, when the routing information and routing parameters of the current page are matched from the routing information mapping table based on the routing name of the current page, there is no need to execute the steps of obtaining the routing parameters of the current page from the click event, matching the routing information of the current page from the preset routing table based on the routing name of the current page, and saving the routing information and routing parameters of the current page to the routing information mapping table based on the routing name of the current page, and directly execute step S303.

[0112] Step S303, obtaining the routing name of the page to be jumped to from the click event, and jumping to the page to be jumped to based on the routing name of the page to be jumped to.

[0113] Specifically, the above step S303 includes:

[0114] Step S3031, based on the routing name of the page to be redirected, matching the routing information of the page to be redirected from the preset routing table.

[0115] Step S3032, obtaining the routing parameters of the page to be jumped to from the click event.

[0116] Step S3033: jump to the page to be jumped to based on the routing information and routing parameters of the page to be jumped to.

[0117] Step S304: When the click event is to refresh the current page and then roll back the page, obtain the route name of the page to be rolled back from the click event. Figure 2 Step S204 of the illustrated embodiment will not be described in detail here.

[0118] Step S305: Based on the route name of the page to be rolled back, match the route information and route parameters of the page to be rolled back from the route information mapping table. Figure 2 Step S205 of the illustrated embodiment will not be described in detail here.

[0119] Step S306: If the routing information and routing parameters of the page to be rolled back are matched in the routing information mapping table, roll back to the page to be rolled back based on the matched routing information and routing parameters of the page to be rolled back. Figure 2 Step S206 of the illustrated embodiment will not be described in detail here.

[0120] The single-page application routing method provided in this embodiment obtains the routing information and routing parameters of the current page when the routing information and routing parameters of the current page are not matched in the routing information mapping table, and saves the routing information and routing parameters of the current page to the routing information mapping table, thereby ensuring the accuracy of subsequent single-page application routing.

[0121] The single-page application routing method provided in this embodiment matches the routing information of the page to be jumped from the preset routing table, obtains the routing parameters of the page to be jumped from the click event, and jumps to the page to be jumped based on the routing information and routing parameters of the page to be jumped, thereby ensuring that the jumped page is correct.

[0122] In some optional implementations, the above single page application routing method further includes:

[0123] Step a1: when the click event is to refresh the current page, the route name of the current page is obtained from the click event.

[0124] As mentioned above, refreshing the current page can be achieved by clicking a refresh button, or by re-entering the link address of the current page in the browser address bar to jump and refresh the current page.

[0125] Step a2: Based on the route name of the current page, match the route information and route parameters of the current page from the route information mapping table.

[0126] Step a3: if the routing information and routing parameters of the current page are matched from the routing information mapping table, the current page is refreshed based on the matched routing information and routing parameters of the current page.

[0127] The routing information and routing parameters of the current page are matched from the routing information mapping table, indicating that the current page has been refreshed before, and the routing information and routing parameters of the current page have been saved in the routing information mapping table. Then, processing and jumping are performed based on the matched routing information and routing parameters of the current page, that is, the current page is refreshed based on the matched routing information and routing parameters of the current page.

[0128] The single-page application routing method provided in this embodiment obtains the routing name of the current page from the click event when the click event is to refresh the current page. If the routing information and routing parameters of the current page are matched from the routing information mapping table based on the routing name of the current page, the current page can be refreshed according to the matched routing information and routing parameters of the current page, thereby achieving accurate refresh of the current page.

[0129] In some optional implementations, the above single page application routing method further includes:

[0130] Step b1: if the routing information and routing parameters of the current page are not matched in the routing information mapping table, the routing parameters of the current page are obtained from the click event.

[0131] Among them, when the click event is to refresh the current page, if the route information and route parameters of the current page are not matched from the route information mapping table based on the route name of the current page, it means that the current page is the latest route, then the route parameters of the current page are obtained from the click event.

[0132] Step b2, based on the routing name of the current page, matching the routing information of the current page from the preset routing table.

[0133] Step b3: based on the route name of the current page, save the route parameters and route information of the current page into the route information mapping table.

[0134] Among them, the route name of the current page is set as the key value, and the route parameters and route information of the current page are cached in the route information mapping table for subsequent query.

[0135] Step b4: Refresh the current page based on the routing parameters and routing information of the current page.

[0136] Wherein, based on the obtained routing parameters and routing information of the current page, the current page is refreshed.

[0137] The single-page application routing method provided in this embodiment obtains the routing parameters and routing information of the current page when the routing information and routing parameters of the current page are not matched in the routing information mapping table, and saves the routing parameters and routing information of the current page to the routing information mapping table so as to facilitate subsequent query during page refresh and page rollback, thereby ensuring accurate display of the page.

[0138] In some optional implementations, the above step S3033 includes:

[0139] Step c1, updating the address bar based on the path information of the page to be redirected and the routing parameters of the page to be redirected.

[0140] After obtaining the routing information and routing parameters of the page to be redirected, the path information and routing parameters in the routing information are spliced, and the splicing result is input into the address bar of the browser to update the address bar.

[0141] Step c2, load the component corresponding to the page to be jumped to, and jump to the page to be jumped to.

[0142] The component corresponding to the page to be jumped in the routing information is loaded, and the jump to the page to be jumped is realized by updating the address bar and loading the component corresponding to the page to be jumped.

[0143] The routing information of the page to be redirected includes the path information of the page to be redirected and the component corresponding to the page to be redirected.

[0144] The single-page application routing method provided in this embodiment loads the component corresponding to the page to be jumped to through the path information and routing parameters of the page to be jumped to, thereby accurately jumping to the page to be jumped to.

[0145] In some optional implementations, the above single page application routing method further includes:

[0146] Step d1: If the routing information of the page to be redirected is not matched in the preset routing table, a predefined error page is displayed.

[0147] Wherein, based on the route name of the page to be jumped, jump to the page to be jumped. If based on the route name of the page to be jumped, the route information of the page to be jumped is not matched in the preset route table, indicating that the page to be jumped does not exist, then a predefined error page is displayed.

[0148] The predefined error page can be a 404 page. The 404 page indicates that the requested resource is not found on the server. Its main function is to inform the user that the page they requested does not exist and provide some navigation options to help the user continue to browse the single-page application.

[0149] The single-page application routing method provided in this embodiment displays a predefined error page when the routing information of the page to be jumped to is not matched in the preset routing table, which can clearly convey to the user the reason why the current request cannot be completed, thereby improving the user experience.

[0150] In some optional implementations, the above single page application routing method further includes:

[0151] When performing page jump, page rollback or page refresh operations, if the network connection is unstable or interrupted, a corresponding prompt message will be displayed to enable the user to determine the network status based on the prompt message and take corresponding measures.

[0152] The corresponding prompt message may be "There is a problem with the network connection, please check the network and try again."

[0153] It should be noted that when performing page jump, page back or page refresh operations, if the network connection is unstable or interrupted, the corresponding prompt information will be displayed, including:

[0154] When performing page jump, page rollback, or page refresh operations, if the network connection is unstable or interrupted, the corresponding operation will be automatically retried.

[0155] Among them, when performing a page jump operation, if the network connection is unstable or interrupted, the page jump operation will be automatically retried.

[0156] When performing a page rollback operation, if the network connection is unstable or interrupted, the page rollback operation will be automatically retried.

[0157] When refreshing a page, if the network connection is unstable or interrupted, the page refresh operation will be automatically retried.

[0158] When the number of automatic retries exceeds the preset threshold and the network connection is still unstable or interrupted, a corresponding prompt message is displayed. In this case, the corresponding prompt message may be "The operation cannot be completed after multiple attempts, please refresh the page manually later."

[0159] The single-page application routing method provided in this embodiment can make users clearly aware that the reason why the current page operation failed to execute successfully is a network problem by promptly displaying a prompt message such as "There is a problem with the network connection, please check the network and try again" when a network problem occurs, thereby avoiding users from being confused or mistakenly thinking that the application has failed due to lack of understanding, and allowing users to check their own network conditions according to the prompts, thereby better interacting with the application.

[0160] In order to make the single-page application routing method provided by the embodiment of the present invention clearer, it is described in conjunction with a specific embodiment. Figure 4 4 is a flow chart of a single-page application routing method according to an embodiment of the present invention.

[0161] like Figure 4 As shown, the single page application routing method includes the following steps:

[0162] In response to the user's click operation, it is necessary to jump from page A to page B. Before the route jump of page A, the routing information of the current page, i.e. page A, is cached locally, i.e. the routing information and routing parameters of the current page are obtained, and the routing information and routing parameters of the current page are saved in the routing information mapping table.

[0163] After completing the saving of the routing information and routing parameters of page A, jump to page B, that is, jump to the page to be jumped based on the routing name of the page to be jumped.

[0164] After jumping to page B, in response to a click operation or a copy operation by the user, page B is refreshed or a link of page B is copied and reopened to implement a refresh of page B.

[0165] After page B is refreshed, in response to the user's click operation, a back page operation is performed on page B, that is, page B is refreshed and then page rollback is performed. At this time, the routing information of page A is matched from the cache and page A is jumped to. This corresponds to the aforementioned acquisition of the routing name of the page to be rolled back from the click event; based on the routing name of the page to be rolled back, the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table; if the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table, then based on the matched routing information and routing parameters of the page to be rolled back, roll back to the page to be rolled back.

[0166] It can be understood that the further description of the single-page application routing method provided in this embodiment is the same as that of the above corresponding embodiment, and will not be repeated here.

[0167] The single-page application routing method provided in this embodiment uses the routing system module of the single-page application to optimize the routing information and parameter information of the page before the jump, that is, the routing parameters, and organizes and optimizes the page routing information and routing parameters into a routing information mapping table of a custom template. The table uses the routing name as the key value to save the page routing information and routing parameters, and matches and optimizes the routing information and routing parameters based on this table. The problem that the page routing parameter information is lost due to page refresh in the single-page application, which in turn causes the rollback page to fail to display or an interface error is solved.

[0168] In this embodiment, a single-page application routing device is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and will not be repeated hereafter. As used below, the term "module" may be a combination of software and / or hardware that implements a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0169] This embodiment provides a single-page application routing device, such as Figure 5 As shown, including:

[0170] The capture module 501 is used to capture a click event corresponding to the click operation in response to a user's click operation in the single-page application.

[0171] The first acquisition module 502 is used to acquire the routing information and routing parameters of the current page when the click event is page jump, and save the routing information and routing parameters of the current page to the routing information mapping table.

[0172] The jump module 503 is used to obtain the routing name of the page to be jumped from the click event, and jump to the page to be jumped based on the routing name of the page to be jumped.

[0173] The second acquisition module 504 is used to acquire the route name of the page to be rolled back from the click event when the click event is to refresh the current page and then roll back the page.

[0174] The first matching module 505 is used to match the routing information and routing parameters of the page to be rolled back from the routing information mapping table based on the routing name of the page to be rolled back.

[0175] The fallback module 506 is used to fall back to the page to be fallen back based on the matched routing information and routing parameters of the page to be fallen back if the routing information and routing parameters of the page to be fallen back are matched from the routing information mapping table.

[0176] In some optional implementations, the single page application routing device further includes:

[0177] The third acquisition module is used to acquire the route name of the current page from the click event when the click event is to refresh the current page.

[0178] The second matching module is used to match the routing information and routing parameters of the current page from the routing information mapping table based on the routing name of the current page.

[0179] The first refresh module is used to refresh the current page based on the matched routing information and routing parameters of the current page if the routing information and routing parameters of the current page are matched from the routing information mapping table.

[0180] In some optional implementations, the single page application routing device further includes:

[0181] The fourth acquisition module is used to acquire the routing parameters of the current page from the click event if the routing information and routing parameters of the current page are not matched in the routing information mapping table.

[0182] The third matching module is used to match the routing information of the current page from the preset routing table based on the routing name of the current page.

[0183] The saving module is used to save the routing parameters and routing information of the current page to the routing information mapping table based on the routing name of the current page.

[0184] The second refresh module is used to refresh the current page based on the routing parameters and routing information of the current page.

[0185] In some optional implementations, the first acquisition module 502 includes:

[0186] The first acquisition unit is used to acquire the route name of the current page when the click event is to jump to a page.

[0187] The first matching unit is used to match the routing information and routing parameters of the current page from the routing information mapping table based on the routing name of the current page.

[0188] The second acquisition unit is used to acquire the routing parameters of the current page from the click event if the routing information and routing parameters of the current page are not matched in the routing information mapping table.

[0189] The second matching unit is used to match the routing information of the current page from the preset routing table based on the routing name of the current page.

[0190] The first saving unit is used to save the routing information and routing parameters of the current page to the routing information mapping table based on the routing name of the current page.

[0191] In some optional implementations, the jump module 503 includes:

[0192] The third matching unit is used to match the routing information of the page to be jumped from the preset routing table based on the routing name of the page to be jumped.

[0193] The third acquisition unit is used to acquire the routing parameters of the page to be jumped from the click event.

[0194] The first jump unit is used to jump to the page to be jumped based on the routing information and routing parameters of the page to be jumped.

[0195] In some optional implementations, the first jump unit includes:

[0196] The first updating unit is used to update the address bar based on the path information of the page to be jumped and the routing parameters of the page to be jumped.

[0197] The first jump subunit is used to load the component corresponding to the page to be jumped to, and jump to the page to be jumped.

[0198] The routing information of the page to be redirected includes the path information of the page to be redirected and the component corresponding to the page to be redirected.

[0199] In some optional implementations, the single page application routing device further includes:

[0200] The display module is used to display a predefined error page if the routing information of the page to be jumped to is not matched in the preset routing table.

[0201] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.

[0202] The single-page application routing device in this embodiment is presented in the form of a functional unit, where the unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that executes one or more software or fixed programs, and / or other devices that can provide the above functions.

[0203] The embodiment of the present invention also provides a computer device having the above Figure 5 The single page application routing device shown.

[0204] See also Figure 6 , Figure 6 is a schematic diagram of the structure of a computer device provided by an optional embodiment of the present invention, such as Figure 6 As shown, the computer device includes: one or more processors 601, memory 602, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components utilize different buses to communicate with each other, and can be installed on a common mainboard or installed in other ways as required. The processor can process the instructions executed in the computer device, including instructions stored in the memory or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides part of the necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 6 A processor 601 is taken as an example.

[0205] The processor 601 may be a central processing unit, a network processor or a combination thereof. The processor 601 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.

[0206] The memory 602 stores instructions executable by at least one processor 601 , so that the at least one processor 601 executes the method shown in the above embodiment.

[0207] The memory 602 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 602 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 602 may optionally include a memory remotely arranged relative to the processor 601, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0208] The memory 602 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 602 may also include a combination of the above types of memory.

[0209] The computer device also includes an input device 603 and an output device 604. The processor 601, the memory 602, the input device 603 and the output device 604 may be connected via a bus or other means. Figure 6 The example of connecting through bus is taken in the following.

[0210] The input device 603 can receive input digital or character information, and generate key signal input related to the user settings and function control of the computer device, such as a touch screen, a keypad, a mouse, a track pad, a touch pad, an indicator bar, one or more mouse buttons, a trackball, a joystick, etc. The output device 604 may include a display device, an auxiliary lighting device (e.g., an LED) and a tactile feedback device (e.g., a vibration motor), etc. The above-mentioned display device includes but is not limited to a liquid crystal display, a light emitting diode, a display and a plasma display. In some optional embodiments, the display device can be a touch screen.

[0211] The embodiment of the present invention also provides a computer-readable storage medium. The method according to the embodiment of the present invention can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium through a network download, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state hard disk, etc.; further, the storage medium can also include a combination of the above types of memories. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.

[0212] A part of the present invention may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present invention through the operation of the computer. Those skilled in the art should understand that the existence of the computer program instruction in a computer-readable medium includes, but is not limited to, a source file, an executable file, an installation package file, etc., and accordingly, the way in which the computer program instruction is executed by the computer includes, but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium may be any available computer-readable storage medium or communication medium accessible to the computer.

[0213] Although the embodiments of the present invention have been described in conjunction with the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present invention, and such modifications and variations are all within the scope defined by the appended claims.

Claims

1. A single page application routing method, characterized in that: The method comprises: In response to a user's click operation on the single-page application, capturing a click event corresponding to the click operation; In the case where the click event is a page jump, obtaining the routing information and routing parameters of the current page, and saving the routing information and routing parameters of the current page to a routing information mapping table; Acquire the route name of the page to be jumped from the click event, and jump to the page to be jumped based on the route name of the page to be jumped; In the case where the click event is to refresh the current page and then roll back the page, the route name of the page to be rolled back is obtained from the click event; Based on the routing name of the page to be rolled back, matching the routing information and routing parameters of the page to be rolled back from the routing information mapping table; If the routing information and routing parameters of the page to be rolled back are matched from the routing information mapping table, roll back to the page to be rolled back based on the matched routing information and routing parameters of the page to be rolled back.

2. The method according to claim 1, characterized in that The method further comprises: When the click event is to refresh the current page, the route name of the current page is obtained from the click event; Based on the route name of the current page, matching the route information and route parameters of the current page from the route information mapping table; If the routing information and routing parameters of the current page are matched from the routing information mapping table, the current page is refreshed based on the matched routing information and routing parameters of the current page.

3. The method according to claim 2, characterized in that The method further comprises: If the routing information and routing parameters of the current page are not matched in the routing information mapping table, obtaining the routing parameters of the current page from the click event; Based on the route name of the current page, matching the route information of the current page from a preset route table; Based on the route name of the current page, saving the route parameters and route information of the current page to the route information mapping table; Refresh the current page based on the routing parameters and routing information of the current page.

4. The method according to claim 1, characterized in that: In the case where the click event is a page jump, obtaining the routing information and routing parameters of the current page, and saving the routing information and routing parameters of the current page to the routing information mapping table, includes: When the click event is to jump to a page, obtain the route name of the current page; Based on the route name of the current page, matching the route information and route parameters of the current page from the route information mapping table; If the routing information and routing parameters of the current page are not matched in the routing information mapping table, obtaining the routing parameters of the current page from the click event; Based on the route name of the current page, match the route information of the current page from the preset route table; Based on the route name of the current page, the route information and route parameters of the current page are saved in a route information mapping table.

5. The method according to claim 1, characterized in that The step of jumping to the page to be jumped based on the route name of the page to be jumped includes: Based on the routing name of the page to be redirected, matching the routing information of the page to be redirected from a preset routing table; Obtaining the routing parameters of the page to be redirected from the click event; Based on the routing information and routing parameters of the page to be jumped, jump to the page to be jumped.

6. The method according to claim 5, characterized in that The step of jumping to the page to be jumped to based on the routing information and routing parameters of the page to be jumped to comprises: Based on the path information of the page to be redirected and the routing parameters of the page to be redirected, the address bar is updated; Load the component corresponding to the page to be jumped to, and jump to the page to be jumped to; The routing information of the page to be redirected includes the path information of the page to be redirected and the component corresponding to the page to be redirected.

7. The method according to claim 5, characterized in that The method further comprises: If the routing information of the page to be redirected is not matched in the preset routing table, a predefined error page is displayed.

8. A single-page application routing device, characterized in that: The device comprises: A capture module, used to respond to a user's click operation in the single-page application and capture a click event corresponding to the click operation; A first acquisition module, used for acquiring routing information and routing parameters of the current page when the click event is page jump, and saving the routing information and routing parameters of the current page to a routing information mapping table; A jump module, used for obtaining the routing name of the page to be jumped from the click event, and jumping to the page to be jumped based on the routing name of the page to be jumped; A second acquisition module is used to acquire the route name of the page to be rolled back from the click event when the click event is to refresh the current page and then roll back the page; A first matching module, configured to match the routing information and routing parameters of the page to be rolled back from the routing information mapping table based on the routing name of the page to be rolled back; The fallback module is used to fall back to the page to be fallen back based on the matched routing information and routing parameters of the page to be fallen back if the routing information and routing parameters of the page to be fallen back are matched from the routing information mapping table.

9. A computer device, characterized in that: include: A memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the single-page application routing method according to any one of claims 1 to 7 by executing the computer instructions.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the single-page application routing method according to any one of claims 1 to 7.

Images