Quick page switching method and system based on VueRouter

Abstract

The invention relates to the technical field of internet, and particularly discloses a VueRouter-based page fast switching method and system, and the method comprises the steps: S1, creating a plurality of view interfaces; s2, creating a layout page and a plurality of first components in each view interface; s3, each view interface corresponds to one master route, and each first component corresponds to different slave routes one by one; s4, a background management system is arranged and used for arranging different first components under the same layout page; and S5, after arrangement is completed, the background management system and the layout page are synchronously updated so as to switch the layout page. According to the method and the device, quick switching of multiple pages can be realized, and the working efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a method and system for fast page switching based on VueRouter. Background Art

[0002] VueRouter is an official routing manager that allows users to access different page content through different URLs without reloading the page. In Vue applications, VueRouter implements route jumps and page content rendering in a componentized way.

[0003] In front-end development based on VueRouter, there are often situations where the same page elements exist on multiple different pages. In the current prior art, such as patent application CN202211588925.3, a method, system, storage medium and device for generating dynamic pages based on Vue. The aforementioned method creates a Vue project based on the Vue scaffolding tool and sets the directory structure of the Vue project; configures the routing addresses, application program interfaces and parent component modules of multiple dynamic pages based on the directory structure, and enables the parent component module to locate the location of each dynamic page using the routing address, and obtains the data of each dynamic page through the application program interface to display each dynamic page respectively. Although the aforementioned method realizes the use of the parent component to locate and configure multiple dynamic pages using multiple routing addresses, this only realizes the development of dynamic pages under the demand of multiple pages by Vue's own componentization. Specifically, the aforementioned method uses common components to copy duplicate code to display, switch and generate dynamic pages. And each routing address also needs to correspond to a dynamic page, so when the number of pages is dozens, the solution to the related problems of routing is more complicated and cumbersome.

[0004] As disclosed in patent application CN201910634030.0, a method, device and storage medium for visual configuration of front-end Vue pages. The method includes inputting a routing folder address in a routing management tool, traversing each routing folder corresponding to the routing folder address, and configuring routing configuration information for each traversed routing folder; starting a browser, and rendering all routing configuration files as a tree structure in the UI interface; each routing path corresponds to multiple page nodes, and there is a routing relationship between the page nodes. There is a routing relationship between routing pages in the same page node; the series connection status between the page nodes of each route is queried through a tree structure; a preview instruction for the tree structure is received, the preview instruction is executed, and the next page node is jumped according to the series connection status between the page nodes until the preview ends. Although the aforementioned method solves the problem that a single page is only used to correspond to an independent routing address, it still uses existing common components to configure visual pages, which does not greatly improve the configuration efficiency of the page to a certain extent. Summary of the invention

[0005] In order to achieve fast switching of multiple pages and improve the work efficiency of constructing new front-end pages, the first solution and the second solution are provided.

[0006] The first scheme provides a method for fast switching of pages based on VueRouter, including: S1, creating several view interfaces; S2, creating a layout page and multiple first components in each view interface; S3, each view interface corresponds to a main route, and each first component corresponds to a different subordinate route one by one; S4, a background management system is provided, which is used to arrange different first components under the same layout page; S5, after the arrangement is completed, the background management system is synchronously updated with the layout page to switch the layout page.

[0007] Beneficial effect: Compared with the prior art, first, the main route corresponds to the view interface, and the sub-route corresponds to different first components. When the first component changes, the sub-route also changes. In this way, the dynamic change of the view interface can be realized under one main route, and there is no need for each routing address to correspond to each dynamic page. This simplifies the routing correspondence problem and also realizes dynamic switching of different pages.

[0008] Secondly, users or technicians can arrange different first components through the background management system, which is more flexible and suitable for the interests of users. In addition, different routes can be used to achieve fast switching of different pages to solve the shortcomings of diversity and complexity in the configuration or arrangement of different public components.

[0009] Preferably, WebSocket is used to synchronize the background management system and the layout page.

[0010] Beneficial effect: Using WebSocket can synchronize and update the background management system and layout page in a timely manner.

[0011] Preferably, the first component includes a display component and a layout component; a plurality of layout components generate a layout page, and the layout page and the display component generate a view interface.

[0012] Beneficial effect: The display component and the layout page are combined to form a view interface, and the layout component is mainly the common part of the layout page.

[0013] Preferably, the layout component includes a header, a navigation and a footer of the layout page.

[0014] Beneficial effect: By setting the layout components, the creation of the layout page can be completed as quickly as possible.

[0015] Preferably, different display components are placed in target areas of the layout page according to the background management system.

[0016] Beneficial effect: This allows users to

[0017] Preferably, multiple main routes are defined according to VueRouter, each main route corresponds to a different URL path, and each URL path corresponds to a view interface.

[0018] Beneficial effects: Multiple main routes can be defined through VueRouter. The main routes correspond to different URL paths. Through the main routes, the user's geographic location and identity attributes can also be understood to obtain the user's interests, and different view interfaces can be displayed based on the user's interests.

[0019] Preferably, a component attribute is set in the main route, and different subordinate routes are called according to the component attribute.

[0020] Beneficial effect: By setting the component property, the main route is configured with multiple different slave routes, and the function of calling the slave routes is realized.

[0021] Preferably, different first components can be called repeatedly in different layout pages.

[0022] Beneficial effect: When creating multiple different view interfaces, by calling the first component under different view interfaces, the workload of technicians can be fully reduced and work efficiency can be greatly improved.

[0023] The second scheme provides a system for fast page switching based on VueRouter, which implements the method for fast page switching based on VueRouter described in the first scheme, including a computer memory, a computer processor, and a computer program stored in the computer memory and executed on the computer memory; the computer program is used to execute the method for fast page switching based on VueRouter.

[0024] Beneficial effect: The method for executing the VueRouter-based page fast switching is implemented in software by using a computer program.

[0025] Preferably, a first creation module, a second creation module and an update module are stored in the computer memory; the first creation module is used to create several view interfaces, each view interface includes a layout page and several first components; the second creation module is used to create a background management system, and the background management system is used to arrange different first components under the same layout page; the update module is used to synchronously update the background management system and the layout page.

[0026] Beneficial effects: Realize fast switching between multiple pages and improve the efficiency of constructing new front-end pages. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] Figure 1 A flowchart of a method for fast page switching based on VueRouter provided in Example 1;

[0028] Figure 2 A schematic diagram of the structure of a system for fast page switching based on VueRouter provided in Example 2; DETAILED DESCRIPTION

[0029] The following embodiments of the technical solution of the present invention are described in detail in conjunction with the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solution of the present invention, and are therefore only used as examples, and cannot be used to limit the protection scope of the present invention.

[0030] Layout page: In web design, a layout page is a template that defines the general structure and style of a web page. It usually contains parts that are common to all pages in a web page, such as the header, navigation menu, sidebar, and footer. The layout page acts as the skeleton of the web page, providing a basic framework on which other content modules can be displayed.

[0031] Display components: Display components are independent, reusable units that make up the content of a web page. Display components are responsible for displaying specific data or information, such as article lists, image carousels, user comments, etc. Each display component is self-contained and can be developed and maintained independently of the rest of the page.

[0032] It should be noted that, unless otherwise specified, the technical terms or scientific terms used in this application should have the common meanings understood by those skilled in the art to which the present invention belongs.

[0033] Embodiment 1

[0034] like Figure 1 As shown, this embodiment provides a method for quick page switching based on VueRouter, including: S1, creating several view interfaces; S2, creating a layout page and multiple first components in each view interface; S3, each view interface corresponds to a main route, and each first component corresponds to a different subordinate route one by one; S4, a background management system is provided, which is used to arrange different first components under the same layout page; S5, after the arrangement is completed, the background management system is synchronously updated with the layout page to switch the layout page.

[0035] Specifically, first, the developer creates one or more view interfaces, each of which includes a layout page and multiple first components. The view interface is the interface displayed to the user by the front end. The layout page is used to define the overall structure and style of the view interface, that is, the layout page is used as the basic template. Secondly, with the layout page as the basic template, independent display components are developed for different functional areas of the view interface. The first component includes a display component and a layout component. The display component and the layout page are combined to form the view interface, and the layout component is a component that constitutes the common part of the layout page. These first components can be reused in different view interfaces, which improves development efficiency and code reuse rate. Then, using the dynamic routing feature of VueRouter, different display components are dynamically loaded and displayed according to the change of the URL. In this way, when the user clicks on different links or triggers a page jump, only the display component can be replaced, while the layout page remains unchanged. At the same time, a backend management system is established to allow non-technical users to configure the page layout and display components through the view interface. Users can place different display components in the target area of ​​the layout page by dragging and dropping, etc. The target area is the area selected by the user and where the display component can be placed. Finally, when the user completes the page configuration in the backend management system, these configurations will be applied to the frontend page in real time without redeploying or refreshing the page. This is usually achieved through WebSocket or other real-time communication mechanisms to ensure that the frontend page and the backend configuration are updated synchronously.

[0036] Use VueRouter to define multiple main routes, each of which corresponds to a URL path. Each URL path corresponds to a view interface. Specifically, different URL paths have different view interfaces, but a view interface includes a layout page and display components. The layout page is the same, but the display components in the layout page are different. Specifically, the layout page is created through the layout component. The layout component is a universal container that contains the common parts of the layout page, including the header, navigation, and footer. In the layout component, you can use Vue's <component>The tag is used with dynamic components (using the :is attribute) to load different display components. In the routing configuration, a first component is specified for each subordinate route, and the first component includes a layout component or a display component. When a user views different display components on a layout page, they are switched through different subordinate routes. It can be implemented that a layout page has multiple subordinate routes, and each subordinate route corresponds to the first component one-to-one. By having each subordinate route correspond to the first component one-to-one, dynamic switching of the first component is achieved. By defining a factory function using the component attribute in the main routing object, different subordinate routes can be dynamically defined and called based on the current routing parameters, and the corresponding first components can be contacted according to different subordinate routes.

[0037] Different view interfaces are named through VueRouter, and under each view interface, different first components can be corresponding to different first components by defining named subordinate routes, and when navigating the first component on the current view interface, navigation is performed through different subordinate routes.

[0038] First, a backend management system is built, which is used by users to configure the different display components of the current layout page. Specifically, through the backend management system, users can configure the display components so that their display components are displayed in the target area of ​​the current layout page. Secondly, users implement the backend configuration in the backend management system, and the backend configuration can be saved in the database for subsequent rendering of the layout page. Finally, when the backend configuration in the backend management system changes, the front end can obtain the latest configuration in real time through polling or WebSocket and other technologies, and update the display of the layout page.

[0039] In this way, when the user navigates in the website, the URL will change, but the layout components will remain unchanged. Only the display components will switch according to the configuration of the subordinate routing and the background management system, so as to achieve rapid update of different sections of the page.

[0040] Based on the route configuration driven method, although all users face the same content framework, they can intelligently display customized section content based on the user's identity attributes, geographic location and other personalized information that the main route can provide. This design optimizes the effects of multiple pages under a single route, improves the consistency of user experience and the satisfaction of personalized needs. Specifically, configuration-driven content display. The system adopts a highly modular design, and through centralized configuration management, it ensures that all users can obtain a unified content framework and layout structure when accessing the same route. Personalized content matching: Using advanced user portrait technology, the system can capture and analyze multi-dimensional data such as user identity information and geographic location to achieve personalized customization and intelligent matching of content.

[0041] Through the routing configuration method, the layout page is used as the basic framework, and different display components are dynamically mounted to achieve fast switching of page layouts. The decoupling and reuse of the first component ensures low coupling between the display component and the layout page, which is convenient for independent development and reuse. At the same time, flexible page combination is achieved through routing configuration. The first component and background configuration are integrated, and the layout page is constructed by using a public component library and configuration, which can improve development efficiency and maintainability while ensuring application consistency and scalability. This approach reduces duplicate code, simplifies the page update process, and allows for rapid adaptation to changing business needs.

[0042] Specifically, through the backend management system, users can configure which display components should be displayed in specific locations on which layout pages. The configurations made by users in the backend management system can be saved to the database for subsequent page rendering. When the backend configuration changes, the frontend can obtain the latest configuration in real time through technologies such as polling or WebSocket, and update the page display. In this way, when users navigate in the website, the URL will change, but the layout components remain unchanged. Only the display components will switch according to the routing configuration and the configuration of the backend management system, thereby achieving rapid updates of different sections of the page. Layout page as a basic template: Developers first create one or more layout pages that define the overall structure and style of the user interface. Independent development of display components: Develop independent display components for different functional areas of the web page. These components can be reused in different layout pages, improving development efficiency and code reuse rate. VueRouter dynamic routing configuration: Using the dynamic routing feature of VueRouter, different display components are dynamically loaded and displayed according to changes in the URL. This means that when users click on different links or trigger page jumps, only the display components can be replaced while keeping the layout page unchanged. Backend management system: Develop a backend management system that allows non-technical users to configure page layout and display components through a graphical interface. Users can place different display components into specific areas of the layout page by dragging and dropping. Once the user completes the page configuration in the backend management system, these configurations will be applied to the frontend page in real time without redeploying or refreshing the page. This is usually achieved through WebSocket or other real-time communication mechanisms to ensure that the frontend page is updated synchronously with the backend configuration.

[0043] Embodiment 2

[0044] Different from the first embodiment, this embodiment also includes S6. In the first time period, the user uses the background management system to adaptively arrange different display components. The "dynamic update" button is a command line of the background management system, which is used to start / complete the dynamic update of the layout page. After clicking the "dynamic update" button, the first display component is moved as the beginning of the first time period. After the last display component is moved, the "dynamic update" button is clicked again to complete the record.

[0045] Specifically, in this embodiment, the "Dynamic Update" button is a display component and also a recorder, which is used to record the time interval between clicking the first display component and the second display component, the time interval between clicking the second display component and the third display component, and so on, and record the time taken to click the second-to-last display component to the last display component, and record the starting point and end point of the first display component, the second display component... and the last display component in sequence. After clicking the "Dynamic Update" button again, the recording is completed. The aforementioned data is recorded in the database to form the first playback data. After clicking the "Play" button, the page is quickly updated to play different display components in sequence, so that multiple static layout pages form a dynamic page, providing users with a good experience.

[0046] Secondly, after the user sets the first playback data, the second playback data and multiple playback data, the first playback data, the second playback data, the third playback data, etc. are set on the layout page in the database as display components. By designing the interval time between the first playback data and other playback data, different playback data are played cyclically and sequentially.

[0047] Specifically, when the first playback data is selected as the first playback source, the third playback data is selected as the second playback source, and the second playback data is selected as the third playback source. The time interval between the first playback source and the second playback source is set, and the time interval between the second playback source and the third playback source is set. The entire view interface first plays the first playback data, then plays the third playback data, and then plays the second playback data. In this way, multiple static layout pages are further formed into dynamic pages, providing users with a good experience.

[0048] Specifically, Example 2 provides an extended application scenario of the page quick switching method based on VueRouter, which mainly adds a "dynamic update" function, allowing users to realize dynamic layout of page display components through custom operations in the background management system.

[0049] In this embodiment, the user can adjust the position of the display component through the background management system and record these adjustment actions. Specifically, the user changes the position of the display component by dragging or other interactive methods, and marks the start and end of the action sequence by clicking the "dynamic update" button. This button is not only a part of the display component, but also plays the role of recording the time and method of the user's operation. It can record the user's operation sequence and time interval from moving the first display component to moving the last display component.

[0050] When the user completes a series of operations and clicks the "Dynamic Update" button again, the system will record these operations and store them as so-called "playback data". This data can be used to simulate the user's previous operations, automatically update the position of the display components on the page, and form an animation-like effect, so that the originally static layout page presents a dynamic change effect, enhancing the user experience.

[0051] Embodiment 3

[0052] like Figure 2 As shown, this embodiment provides a system for fast switching of pages based on VueRouter, which is used to implement the method for fast switching of pages based on VueRouter described in the above embodiment. A system 100 for fast switching of pages based on VueRouter includes a computer memory 101 and a computer processor 102, and the computer memory 101 includes a computer program 1011.

[0053] The computer program 1011 is stored in the computer memory 101 and can be executed on the computer processor 102. It should be understood that the computer processor 102 is used to provide computing and control capabilities. The computer memory 101 includes a non-volatile storage medium and an internal memory, wherein the non-volatile storage medium stores the computer program 1011, and the internal memory provides an environment for the operation of the computer program in the non-volatile storage medium.

[0054] The computer memory 101 stores a first creation module, a second creation module and an update module; the first creation module is used to create a plurality of view interfaces, each view interface includes a layout page and a plurality of first components; the second creation module is used to create a background management system, and the background management system is used to arrange different first components under the same layout page; the update module is used to synchronously update the background management system and the layout page.

[0055] This embodiment is a brief description, and the specific contents of the previous embodiments may be referred to for supplementary information.

[0056] This embodiment is a brief description, and the specific contents of the previous embodiments may be referred to for relevant supplements.

[0057] In this specification, a lot of specific details are described. However, it is understood that embodiments of the present invention can be put into practice without these specific details. In some examples, known methods, systems and techniques are not shown in detail, so as not to obscure the understanding of this specification. In the description of this specification, the description of reference terms "one embodiment", "some embodiments", "example", "specific example" or "some examples" etc. means that the specific features, methods, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of this specification.

[0058] In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, systems, materials or characteristics described can be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art can combine and combine different embodiments or examples described in this specification and the features of different embodiments or examples without contradiction.

[0059] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. These modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present invention, and they should all be included in the scope of the claims and specification of the present invention.< / component>

Claims

1. The method of fast page switching based on VueRouter is characterized by: include: S1, create several view interfaces; S2, creating a layout page and a plurality of first components in each view interface; S3, each view interface corresponds to a main route, and each first component corresponds to a different slave route; S4, a background management system is provided for arranging different first components on the same layout page; S5, after the layout is completed, the background management system and the layout page are updated synchronously to switch the layout page.

2. According to the method for fast page switching based on VueRouter in claim 1, it is characterized in that: Use WebSocket to synchronize the background management system and layout page updates.

3. According to the method for fast page switching based on VueRouter in claim 1, it is characterized in that: The first component includes a display component and a layout component; multiple layout components generate a layout page, and the layout page and the display component generate a view interface.

4. According to the method for fast page switching based on VueRouter in claim 3, it is characterized in that: Layout components include the header, navigation, and footer of the layout page.

5. According to claim 3, the method for fast page switching based on VueRouter is characterized in that: Place different display components in the target area of ​​the layout page according to the background management system.

6. The method for fast page switching based on VueRouter according to claim 1 is characterized in that: According to VueRouter, multiple main routes are defined, each main route corresponds to a different URL path, and each URL path corresponds to a view interface.

7. The method for fast page switching based on VueRouter according to claim 6 is characterized in that: The component attribute is set in the main route, and different slave routes are called according to the component attribute.

8. The method for fast page switching based on VueRouter according to claim 1, characterized in that: Different first components can be called repeatedly in different layout pages.

9. A fast page switching system based on VueRouter, characterized in that: A method for implementing fast page switching based on VueRouter as described in any one of claims 1-8, comprising a computer memory, a computer processor, and a computer program stored in and executed on the computer memory; the computer program is used to execute the method for fast page switching based on VueRouter.

10. The system for fast page switching based on VueRouter according to claim 5, characterized in that: The computer memory stores a first creation module, a second creation module and an update module; A first creation module, used to create a plurality of view interfaces, each of which includes a layout page and a plurality of first components; The second creation module is used to create a background management system, and the background management system is used to arrange different first components on the same layout page; The update module is used to synchronize the update of the backend management system and the layout page.

Images