Method for automatically adding routing information based on Vue component library
By automatically adding routing information in the Vue component library, the problem of cumbersome adding routing information is solved, which improves the convenience and efficiency of component use and reduces configuration costs.
Patent Information
- Application Number
- CN202510425440.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-04-07
- Publication Date
- 2025-07-25
AI Technical Summary
In the prior art, when using the Vue component library, manual routing information is complicated to operate, especially when the component data is large, resulting in a reduced convenience of use.
Provides a method of automatically adding routing information based on Vue component library. By creating a routing production method in the component library, external applications merge the route list during initialization, and directly forward the route display component when the component is used, reducing manual operations.
It realizes that no need to manually add routing information in the Vue component library, which improves the convenience and efficiency of component use and reduces configuration costs.
Smart Images
Figure CN120371379A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of Internet technologies, and particularly relates to a method for automatically adding routing information based on a Vue component library. Background Art
[0002] Nowadays, many platform applications developed using Vue have mostly similar functional characteristics and similar front-end functional planning, including tables, query conditions, forms for adding, deleting, modifying, and querying, and menu bars, etc. Based on this characteristic, a large number of Vue component libraries have emerged on the market for application developers to conveniently and quickly directly use the components in the component library to quickly build their own applications.
[0003] However, currently when using the components in a Vue component library, if you want to use a certain component to render an entire page, the method of manually registering routing information and adding it to the application routing list is still adopted. Especially when the amount of component data used increases, manually adding routing information will greatly reduce the convenience of using the components.
[0004] Based on the above problems, the present invention proposes a method for automatically adding routing information based on a Vue component library. Summary of the Invention
[0005] The present invention provides a simple and efficient method for automatically adding routing information based on a Vue component library to make up for the defects of the prior art.
[0006] The present invention is implemented through the following technical solutions:
[0007] A method for automatically adding routing information based on a Vue component library, characterized by including the following steps:
[0008] Step S1: Provide a method for automatically registering routing information according to parameters in the Vue component library and throw it;
[0009] Step S2: When the external application initializes the routing information, reference the thrown routing creation method, form routing information for all components in the Vue component library in the application, and register it in the routing list of the external application;
[0010] Step S3: When using the components, directly forward the route to display the required components without manually adding routing information.
[0011] In the said step S1, create a routing creation method at the Vue component library entry index.js, and the parameter of the routing creation method is the routing prefix input by the application;
[0012] When creating, traverse each component in the Vue component library, concatenate the route prefix with the component name to form the URL of the route, use the component name and the component to form a component route list, and throw the route creation method together with the component route list to the external application.
[0013] In the step S1, the parameters of the route making method include prePath, componentNameList, keepAliveList, and otherProps.
[0014] In the step S2, the external application references the route making method thrown in the Vue component library through the entry file main.js, and merges the made component route list with the application's route list during the initialization of Vue, and injects it into the Vue instance.
[0015] In the step S2, when the external application uses the Vue component library by using the global method Vue.use(), it references the thrown route making method, calls the route making method during the initialization of the Vue instance, merges the made component route list with the application route list, assigns it to Vue router to form a route list, and injects it into the Vue instance;
[0016] All components on the external application page are accessed through the route, and there is no need to add route information by itself.
[0017] In the step S3, the external application directly accesses through the route. If it is necessary to add query parameters to the route, view them in combination with the relevant configuration of the component. If the relevant configuration of the component allows, pass in the query parameters.
[0018] A system for automatically adding route information based on a Vue component library, used to implement the above method, includes a route making module and a route reference module;
[0019] The route making module is responsible for creating a route making method at the entry index.js of the Vue component library and throwing it;
[0020] The route reference module is responsible for helping the external application reference the thrown route making method when initializing the route information, forming route information for all components in the Vue component library in the application, and registering them in the external application's route list.
[0021] A device for automatically adding route information based on a Vue component library, characterized in that it includes a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the above method steps when executing the computer program.
[0022] A readable storage medium, characterized in that: a computer program is stored on the readable storage medium, and when the computer program is executed by a processor, the above-mentioned method steps are implemented.
[0023] The beneficial effect of the present invention is that the method for automatically adding routing information based on the Vue component library is convenient and efficient. All components in the Vue component library can be directly accessed and rendered through routing in the application without manually adding routing information, reducing the configuration cost. Description of the Drawings
[0024] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.
[0025] Figure 1 It is a schematic diagram of the routing composition process within the Vue component library of the present invention.
[0026] Figure 2 It is a schematic diagram of the method for automatically adding routing information based on the Vue component library of the present invention. Detailed Embodiments
[0027] In order to enable those skilled in the art of the present technology to better understand the technical solutions in the present invention, the following will clearly and completely describe the technical solutions in the embodiments of the present invention in combination with the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.
[0028] The Vue component library fully utilizes a number of reusable components for Vue projects, including form components, list components, combined button components, etc.; the components in the Vue component library are used and registered through the global method Vue.use(), and the components in the Vue component library are referenced through the import method, which can greatly improve the development efficiency and shorten the development cycle. For list, query condition, add / delete / modify / check pages, the components in the component library can be directly reused. However, there is a problem with this usage method, that is, when using components, if the components are rendered as a whole page, it is necessary to manually add and register the routing information of the components in the routing registration method. When the usage amount of the components increases, this manual addition method makes the use of the components less convenient.
[0029] The method for automatically adding routing information based on the Vue component library includes the following steps:
[0030] Step S1: Provide a method in the Vue component library to automatically register route information based on parameters and throw it;
[0031] Step S2: When the external application initializes the route information, reference the thrown route creation method, form route information for all components in the Vue component library in the application, and register them in the route list of the external application;
[0032] Step S3: When using a component, directly forward the component required for route display without manually adding route information.
[0033] In the said Step S1, create a route creation method at the Vue component library entry index.js. The parameter of the route creation method is the route prefix input by the application;
[0034] When creating, traverse each component of the Vue component library, splice the route prefix with the component name to form the url of the route, use the component name and the component to form a component route list, and throw the route creation method together with the component route list to the external application.
[0035] In the said Step S1, the parameters of the route creation method include prePath, componentNameList, keepAliveList, and otherProps.
[0036] Among them, the prePath parameter is of string type; the user can customize how to add a route address before the component name, which can be determined according to the file directory or other rules in the user's own project. This parameter will form the overall route of the component together with the component name.
[0037] The componentNameList parameter is an Array <string>Type; a list of components that the user wants to form a routing list. The user can form a routing list as needed and put the names of the components they need into this parameter, indicating that only these components are required to form a routing list.
[0038] The keepAliveList parameter is an Array <string>Type; If the user needs to set keepAlive of the route to true to implement page data caching, the component name to be set can be placed in this parameter.
[0039] otherProps: Other custom configurations that need to be set in the route can be written into this parameter to set custom variables for the route.
[0040] In step S2, the external application references the route creation method thrown in the Vue component library through the entry file main.js, and merges the created component route list with the application's route list during Vue initialization and injects it into the Vue instance.
[0041] In step S2, when the external application uses the Vue component library using the global method Vue.use(), it references the thrown route creation method, calls the route creation method during Vue instance initialization, merges the created component route list with the application's route list, assigns it to Vue router to form a route list, and injects it into the Vue instance;
[0042] Vue Router is the official routing manager provided by Vue.js for managing page navigation and view switching in single-page applications (SPAs).
[0043] The external application page accesses all components through the route without adding route information by itself.
[0044] In step S3, the external application directly accesses through the route. If a query parameter needs to be added to the route, it is viewed in conjunction with the relevant configuration of the component. If the relevant configuration of the component allows, the query parameter is passed in.
[0045] The system for automatically adding route information based on the Vue component library, used to implement the above method, includes a route creation module and a route reference module;
[0046] The route creation module is responsible for creating a route creation method at the Vue component library entry index.js and throwing it;
[0047] The route reference module is responsible for helping the external application reference the thrown route creation method when initializing route information, forming route information for all components in the application, and registering them in the external application's route list.
[0048] The device for automatically adding route information based on the Vue component library includes a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the above method steps when executing the computer program.
[0049] A computer program is stored on the readable storage medium, and when the computer program is executed by a processor, the above method steps are implemented.
[0050] The method for automatically adding routing information based on a Vue component library can provide a method for automatically registering routing information according to parameters in the Vue component library and throw it. In this way, when an external application references the thrown routing creation method during the initialization of routing information, all components in the Vue component library can be formed into routing information in the application and registered in the routing list of the external application. When using a component, the required component can be directly displayed by forwarding the route, without the need to manually add routing information, reducing the configuration cost.
[0051] The above-described embodiments are only one of the specific implementation manners of the present invention, and the ordinary changes and substitutions made by those skilled in the art within the scope of the technical solution of the present invention should be included in the protection scope of the present invention.< / string> < / string>
Claims
1. A method for automatically adding routing information based on a Vue component library, characterized in that: It includes the following steps: Step S1: Provide a method in the Vue component library to automatically register route information based on parameters and throw it; Step S2: When the external application initializes the route information, it references the thrown route creation method, forms route information for all components in the Vue component library in the application, and registers them in the route list of the external application; Step S3: When using a component, directly forward the route to display the required component without manually adding route information.
2. The method for automatically adding routing information based on the Vue component library according to claim 1, characterized in that: In step S1, a route creation method is created at the Vue component library entry index.js, and the parameter of the route creation method is the route prefix input by the application; When creating, traverse each component of the Vue component library, splice the route prefix with the component name to form the url of the route, use the component name and the component to form a component route list, and throw the route creation method together with the component route list to the external application.
3. The method for automatically adding routing information based on the Vue component library according to claim 2, wherein: In step S1, the parameters of the route creation method include prePath, componentNameList, keepAliveList, and otherProps.
4. The method for automatically adding routing information based on the Vue component library according to claim 3, wherein: In step S2, the external application references the route creation method thrown in the Vue component library through the entry file main.js, merges the created component route list with the application's route list during Vue initialization, and injects it into the Vue instance.
5. The method for automatically adding routing information based on the Vue component library according to claim 4, characterized in that: In step S2, when the external application uses the Vue component library using the global method Vue.use(), it references the thrown route creation method, calls the route creation method during Vue instance initialization, merges the created component route list with the application route list, assigns it to Vue router to form a route list, and injects it into the Vue instance; The external application page accesses all components through the route without adding route information by itself.
6. The method for automatically adding routing information based on a Vue component library according to claim 1, characterized in that: In step S3, the external application directly accesses through the route. If query parameters need to be added to the route, view in combination with the relevant configuration of the component. If the relevant configuration of the component allows, pass in the query parameters.
7. A system for automatically adding routing information based on a Vue component library, characterized in that: Used to implement the method described in any one of claims 1 to 6, including a route creation module and a route reference module; The route creation module is responsible for creating a route creation method at the Vue component library entry index.js and throwing it; The route reference module is responsible for helping the external application reference the thrown route creation method when initializing the route information, forming route information for all components in the Vue component library in the application, and registering them in the route list of the external application.
8. A device for automatically adding routing information based on a Vue component library, characterized in that: It includes a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the method steps described in any one of claims 1 to 6 when executing the computer program.
9. A readable storage medium, characterized in that: A computer program is stored on the readable storage medium, and when the computer program is executed by the processor, it implements the method steps described in any one of claims 1 to 6.