A single-page application switching display multi-view method and single-page application

Abstract

The application discloses a single-page application switching display multi-view method and a single-page application, and the method comprises the following steps: receiving a user access request, confirming target route information and loading a view component corresponding to the target route, establishing a component instance cache in the path of the target route; updating a display mode identifier in the target route information, and displaying the component instance cache to a tab interface after instantiation and rendering by the tab component; when a user accesses multi-view content, updating the display mode identifier in the target route information, releasing the binding relationship between the target route and the corresponding view component, and displaying the component instance cache to a pop-up window page after instantiation and rendering by the pop-up window component. The application uses a view component instance cache as an intermediary, combines a tab component and a pop-up window component in two display modes, and realizes switching to a pop-up window mode in the same route to meet the requirement of simultaneously displaying multi-view component content.

Description

Technical Field

[0001] This invention relates to the field of routing process optimization technology, and in particular to a method for switching between multiple views in a single-page application and a single-page application. Background Technology

[0002] In back-end management systems, the need for multiple tabs is very common. Users often need to navigate between multiple tabs, or open multiple tabs simultaneously or use pop-ups to compare the content of different pages. In single-page applications using a routing model, a route can only load one specified page view component. When the route changes, the view component must also change accordingly, so multiple view components cannot be displayed simultaneously.

[0003] Currently, multiple tabs or pop-ups can be displayed simultaneously by loading page view components in non-routable mode or by nesting pages using iframes. However, this approach involves loading a lot of resources, which can cause lag on low-spec computers. Furthermore, non-routable mode does not allow direct access to specific pages via URLs, failing to meet certain business requirements. Each time a tab is closed and reopened, the browser window resources are rebuilt, resulting in noticeable white screens. Due to the fragmented nature of the pages, the states of tabs and pop-ups cannot be consistent. And because there is no routing, it is impossible to directly access a specific tab page via the webpage URL, and browser history is also lost. Summary of the Invention

[0004] This invention provides a method for switching between multiple views in a single-page application and a single-page application. It uses view component instance caching as an intermediary and combines two display modes, tab components and pop-up components, to achieve switching to pop-up mode within the same route to meet the need to display the content of multiple view components simultaneously.

[0005] To achieve the above objectives, a first aspect of this application provides a method for switching between multiple views in a single-page application, comprising:

[0006] Based on the routing table configuration, bind each route and each view component one by one;

[0007] Receive user access request, confirm target route information and load the view component corresponding to the target route, and establish component instance cache with the path of the target route;

[0008] Update the display mode identifier in the target route information, pass the parameters of the component instance cache to the tab component, and display the component instance cache instantiated and rendered by the tab component on the tab interface;

[0009] When a user accesses multi-view content, the current tab component is destroyed, the display mode identifier in the target route information is updated, and the binding relationship between the target route and the corresponding view component is released.

[0010] The parameters of the component instance cache are passed to the pop-up component, and the component instance cache is instantiated and rendered by the pop-up component and then displayed on the pop-up page.

[0011] In one possible implementation of the first aspect, after passing the parameters of the component instance cache to the pop-up component, and displaying the component instance cache instantiated and rendered by the pop-up component on the pop-up page, the method further includes:

[0012] Receive the user's switching command, destroy the current pop-up component, update the display mode identifier in the target route information, and restore the binding relationship between the target route and the corresponding view component;

[0013] The parameters of the component instance cache are passed to the tab component, and the tab component instantiates and renders the component instance cache and displays it on the tab interface.

[0014] In one possible implementation of the first aspect, updating the display mode identifier in the target route information and removing the binding relationship between the target route and the corresponding view component specifically includes:

[0015] The display mode identifier in the target route information is converted into a pop-up identifier. When the current route needs to be changed, the pop-up identifier confirms that the current route already has a corresponding pop-up component, thus preventing the change of the current route.

[0016] In one possible implementation of the first aspect, updating the display mode identifier in the target route information and restoring the binding relationship between the target route and the corresponding view component specifically includes:

[0017] The display mode identifier in the target route information is converted into a tab identifier. When the current route needs to be changed, the tab identifier confirms that the current route does not have a pop-up component, and the current route is changed.

[0018] In one possible implementation of the first aspect, the target routing information includes view component paths, icons, page parameters, and display mode identifiers.

[0019] A second aspect of this application provides a single-page application, including:

[0020] The binding module is used to bind each route and each view component one by one according to the routing table configuration;

[0021] The caching module is used to receive user access requests, confirm target route information, load the view component corresponding to the target route, and establish a component instance cache based on the path of the target route.

[0022] The first rendering module is used to update the display mode identifier in the target routing information, pass the parameters of the component instance cache to the tab component, and display the component instance cache instantiated and rendered by the tab component to the tab interface.

[0023] The switching module is used to destroy the current tab component, update the display mode identifier in the target route information, and remove the binding relationship between the target route and the corresponding view component when the user accesses multi-view content.

[0024] The second rendering module is used to pass the parameters of the component instance cache to the pop-up component, and then display the component instance cache instantiation rendering module on the pop-up page through the pop-up component.

[0025] In one possible implementation of the second aspect, the switching module is further configured to receive a user's switching instruction, destroy the current pop-up component, update the display mode identifier in the target route information, and restore the binding relationship between the target route and the corresponding view component;

[0026] The first module is further configured to pass the parameters of the component instance cache to the tab component, and then display the component instance cached and instantiated by the tab component on the tab interface.

[0027] In one possible implementation of the second aspect, the switching module includes a route pre-guard, which is used to convert the display mode identifier in the target route information into a pop-up identifier. When the current route needs to be changed, the pop-up identifier confirms that the current route already has a corresponding pop-up component, thus preventing the change of the current route.

[0028] In one possible implementation of the second aspect, the route pre-guard is further used to convert the display mode identifier in the target route information into a tab identifier. When the current route needs to be changed, the tab identifier confirms that the current route does not have a pop-up component, and the current route is changed.

[0029] In one possible implementation of the second aspect, the target routing information includes view component paths, icons, page parameters, and display mode identifiers.

[0030] Compared to existing technologies, this invention provides a method for switching between multiple views in a single-page application and a single-page application itself. During application operation, the page view components are displayed in tab mode by default. When the user actively triggers a switch to pop-up mode, the current route is unbound from the view component to meet the requirement of displaying multiple pop-ups simultaneously. Then, the cached view component instance is passed to the pop-up component for display. When it is necessary to restore the pop-up to tab mode, the pop-up component is destroyed, the binding relationship between the route and the view component is restored, and the corresponding tab is displayed. The binding and unbinding of routes and view components are both implemented through route pre-guards. Since the route does not change when the view component corresponding to the route information is in pop-up mode, the view component and cache also remain unchanged, thus enabling the same route to display multiple pop-ups. Attached Figure Description

[0031] Figure 1 This is a flowchart illustrating a method for switching between multiple views in a single-page application according to an embodiment of the present invention;

[0032] Figure 2 This is a schematic diagram of a single-page application operation provided by an embodiment of the present invention. Detailed Implementation

[0033] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0034] Please see Figure 1 An embodiment of the present invention provides a method for switching between multiple views in a single-page application, comprising:

[0035] S10 provides the ability to bind each route and view component one by one according to the routing table configuration.

[0036] S11. Receive user access request, confirm target route information and load the view component corresponding to the target route, and establish component instance cache based on the path of the target route.

[0037] S12. Update the display mode identifier in the target route information, pass the parameters of the component instance cache to the tab component, and display the component instance cache instantiated and rendered by the tab component on the tab interface.

[0038] S13. When a user accesses multi-view content, destroy the current tab component, update the display mode identifier in the target route information, and remove the binding relationship between the target route and the corresponding view component.

[0039] S14. Pass the parameters of the component instance cache to the pop-up component, and display the component instance cache instantiation rendering through the pop-up component to the pop-up page.

[0040] This invention employs a route view component caching method to enable tabs and pop-ups in a single-page application to share component instances, converting the component instances into pop-ups for display, thereby achieving multi-view display on a single page.

[0041] When a single-page application (SPA) starts, each route is bound one-to-one with its corresponding tab view component. When a user begins accessing an application route, the program collects the route information of the upcoming page (e.g., view component path, icon, parameters, etc.) and generates tab description data. Based on the collected route data, the corresponding tab view component is loaded, and the generated tab view component instance is cached. The page view components are displayed in tab mode by default. Figure 2 As shown, when a user actively triggers the switch to pop-up mode, the current route is unbound from the view component to meet the requirement of displaying multiple pop-ups simultaneously. Then, the cached view component instance is passed to the pop-up component for display. When it is necessary to restore the pop-up to tab mode, the pop-up component is destroyed, the binding relationship between the route and the view component is restored, and the corresponding tab is displayed.

[0042] For example, after passing the parameters of the component instance cache to the pop-up component, and displaying the component instance cache instantiated and rendered by the pop-up component on the pop-up page, the method further includes:

[0043] Receive the user's switching command, destroy the current pop-up component, update the display mode identifier in the target route information, and restore the binding relationship between the target route and the corresponding view component;

[0044] The parameters of the component instance cache are passed to the tab component, and the tab component instantiates and renders the component instance cache and displays it on the tab interface.

[0045] The switching command here refers to the user actively triggering the action of a certain tab, which will switch the current component instance to tab mode for display.

[0046] For example, updating the display mode identifier in the target route information and removing the binding relationship between the target route and the corresponding view component specifically includes:

[0047] The display mode identifier in the target route information is converted into a pop-up identifier. When the current route needs to be changed, the pop-up identifier confirms that the current route already has a corresponding pop-up component, thus preventing the change of the current route.

[0048] For example, updating the display mode identifier in the target route information and restoring the binding relationship between the target route and the corresponding view component specifically includes:

[0049] The display mode identifier in the target route information is converted into a tab identifier. When the current route needs to be changed, the tab identifier confirms that the current route does not have a pop-up component, and the current route is changed.

[0050] In a single-page application (SPA), the routing configuration table maps route paths to view components. View component instances are typically cached using the route path as an identifier, allowing the SPA to retrieve the corresponding view component instance. The display mode of the view component corresponding to the current route is determined by the display mode identifier in the route information.

[0051] The binding and unbinding of routes to view components is achieved through route pre-guards, as follows:

[0052] (1) When the application initializes, register a route before guard. The route before guard will perform certain judgments before the route changes to determine whether to execute the route change.

[0053] (2) When a route needs to be changed, if a corresponding pop-up component already exists for the route to be entered, the route change is prevented. If no corresponding pop-up exists for the route to be entered, the route is changed normally, and the corresponding tab component is displayed. The presence or absence of the pop-up component is determined by the display mode identifier in the current route information. There are two types of display mode identifiers: tab identifier and pop-up identifier.

[0054] (3) Since the route will not change when the view component corresponding to the route information is in pop-up mode, the view component and cache will not change either, thus enabling multiple pop-ups to be displayed for the same route.

[0055] This invention enables multiple pop-ups to be displayed for the same route by registering a route pre-guard in a single-page application. This guard detects the route before entering the route page and prevents the route from changing if the corresponding view is in pop-up mode.

[0056] For example, the target routing information includes view component path, icon, page parameters, and display mode identifier.

[0057] In summary, traditional route-based single-page applications assign one view component to one route. The embodiments of this invention use cached view component instances as parameters passed to tab and pop-up components, enabling two display modes for a single view component. Combined with route pre-guards, this allows multiple pop-ups to be displayed simultaneously for a single route. It retains the advantage of on-demand loading in route-based applications while resolving the limitation that only one view component can be displayed per route.

[0058] One embodiment of this application provides a single-page application, including: a binding module, a caching module, a first rendering module, a switching module, and a second rendering module.

[0059] The binding module is used to bind each route and each view component according to the routing table configuration.

[0060] The caching module is used to receive user access requests, confirm target route information, load the view component corresponding to the target route, and establish a component instance cache based on the path of the target route.

[0061] The first rendering module is used to update the display mode identifier in the target routing information, pass the parameters of the component instance cache to the tab component, and display the component instance cache instantiated and rendered by the tab component on the tab interface.

[0062] The switching module is used to destroy the current tab component, update the display mode identifier in the target route information, and remove the binding relationship between the target route and the corresponding view component when the user accesses multi-view content.

[0063] The second rendering module is used to pass the parameters of the component instance cache to the pop-up component, and then display the component instance cache instantiation rendering module on the pop-up page through the pop-up component.

[0064] For example, the switching module is further configured to receive a user's switching command, destroy the current pop-up component, update the display mode identifier in the target route information, and restore the binding relationship between the target route and the corresponding view component;

[0065] The first module is further configured to pass the parameters of the component instance cache to the tab component, and then display the component instance cached and instantiated by the tab component on the tab interface.

[0066] For example, the switching module includes a route pre-guard, which is used to convert the display mode identifier in the target route information into a pop-up identifier. When the current route needs to be changed, the pop-up identifier confirms that the current route already has a corresponding pop-up component, thus preventing the change of the current route.

[0067] For example, the route pre-guard is also used to convert the display mode identifier in the target route information into a tab identifier. When the current route needs to be changed, the tab identifier confirms that the current route does not have a pop-up component, and the current route is changed.

[0068] For example, the target routing information includes view component path, icon, page parameters, and display mode identifier.

[0069] Compared to existing technologies, this invention provides a method for switching between multiple views in a single-page application and a single-page application itself. During application operation, the page view components are displayed in tab mode by default. When the user actively triggers a switch to pop-up mode, the current route is unbound from the view component to meet the requirement of displaying multiple pop-ups simultaneously. Then, the cached view component instance is passed to the pop-up component for display. When it is necessary to restore the pop-up to tab mode, the pop-up component is destroyed, the binding relationship between the route and the view component is restored, and the corresponding tab is displayed. The binding and unbinding of routes and view components are both implemented through route pre-guards. Since the route does not change when the view component corresponding to the route information is in pop-up mode, the view component and cache also remain unchanged, thus enabling the same route to display multiple pop-ups.

[0070] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the single-page application described above can be referred to the corresponding process in the foregoing method embodiments, and will not be elaborated upon here.

[0071] The above description represents the preferred embodiments of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of the present invention, and these improvements and modifications are also considered to be within the scope of protection of the present invention.

Claims

1. A method for switching display of multiple views by a single-page application, characterized in that, The method comprises the steps of: According to the routing table configuration, one-to-one binding of each route and each view component; Receiving a user access request, confirming target route information and loading the view component corresponding to the target route, and establishing a component instance cache in the path of the target route; Update the display mode identifier in the target route information, pass the parameters of the component instance cache to the tab component, and render the component instance cache through the tab component to display to the tab interface; When a user accesses multi-view content, destroy the current tab component, update the display mode identifier in the target route information, and remove the binding relationship between the target route and the corresponding view component; Pass the parameters of the component instance cache to the popup component, and render the component instance cache through the popup component to display to the popup page; After the step of passing the parameters of the component instance cache to the popup component and rendering the component instance cache through the popup component to display to the popup page, the method further comprises the steps of: Receiving a user's switching instruction, destroying the current popup component, updating the display mode identifier in the target route information, and restoring the binding relationship between the target route and the corresponding view component; Pass the parameters of the component instance cache to the tab component, and render the component instance cache through the tab component to display to the tab interface. 2.The method of claim 1, wherein, The step of updating the display mode identifier in the target route information and removing the binding relationship between the target route and the corresponding view component comprises: Convert the display mode identifier in the target route information to a popup identifier, and when the current route needs to be changed, confirm that the current route already has a corresponding popup component according to the popup identifier, and prevent the current route from being changed. 3.The method of claim 1, wherein, The step of updating the display mode identifier in the target route information and restoring the binding relationship between the target route and the corresponding view component comprises: Convert the display mode identifier in the target route information to a tab identifier, and when the current route needs to be changed, confirm that the current route does not have a popup component according to the tab identifier, and change the current route. 4.The method of claim 1, wherein, The target route information comprises a view component path, an icon, a page parameter and a display mode identifier.

5. A single-page application apparatus, characterized by comprising: The method comprises the steps of: A binding module is configured to one-to-one bind each route and each view component according to a routing table configuration; A cache module is configured to receive a user access request, confirm target route information, and load the view component corresponding to the target route, and establish a component instance cache in the path of the target route; A first rendering module is configured to update the display mode identifier in the target route information, pass the parameters of the component instance cache to the tab component, and render the component instance cache through the tab component to display to the tab interface; A switching module is configured to, when a user accesses multi-view content, destroy the current tab component, update the display mode identifier in the target route information, and remove the binding relationship between the target route and the corresponding view component; A second rendering module is configured to pass the parameters of the component instance cache to the popup component, and render the component instance cache through the popup component to display to the popup page; The switching module is further configured to receive a switching instruction of a user, destroy a current pop-up component, update a display mode identifier in the target routing information, and restore a binding relationship between the target routing and a corresponding view component; The first rendering module is further configured to pass parameters of the component instance cache to the tab component, and display the component instance cache instantiated by the tab component to a tab interface.

6. The single-page application apparatus of claim 5, wherein, The switching module includes a routing pre-guard, which is configured to convert a display mode identifier in the target routing information into a pop-up identifier, and when the current routing needs to be changed, confirm that the current routing has a corresponding pop-up component according to the pop-up identifier, and prevent the change of the current routing.

7. The single-page application apparatus of claim 6, wherein, The routing pre-guard is further configured to convert the display mode identifier in the target routing information into a tab identifier, and when the current routing needs to be changed, confirm that the current routing does not have a pop-up component according to the tab identifier, and change the current routing.

8. The single-page application apparatus of claim 5, wherein, The target routing information includes a view component path, an icon, a page parameter, and a display mode identifier.

Images