Our general application system , The menu is the entrance to many functional interfaces , Menu in order to better reflect the function point settings , It is usually generated dynamically from the database , And it also needs to be based on the different roles of users , Filter out some menus without permission ; stay Vue&Element In a pure front-end framework , The concept of routing is also introduced , Routing is a collection of information related to a specific page view and layout , Is a collection of page connections that users can access . This essay introduces Vue+Element The relationship between menu and routing in front end application development .
1、 The relationship between menu and route
As described earlier , The menu is the function entrance displayed on the interface , Routing is the connection that our front end can access , The combination of the two can access a page normally . Some systems use route definitions as a source of menus , So you can also present the menu , But then their relationship is coupled , And it's not easy to implement dynamic processing .
Our menu is recorded as a database , It can be maintained through the system , So it's dynamically generated , Its key value corresponds to the route .
Our approach is based on the locally configured routing list , The menu is configured on the back end , The front end dynamically obtains the menu list through the interface , Through the corresponding relationship between the name of the menu and the name of the route , Let's contrast the menu set , Then filter the list of all local static routes , Then get the list of routes that users can access , Set dynamic routing to front end , So the interface is realized according to the user's role / Different authorities , And changing the user's menu interface and accessible route set .
The edit interface of the menu is shown below , You can select the appropriate icon in the icon list
The general operation process of menu routing is as follows
Menu data configured through the database , When we finally get back to the front end , It's a JSON aggregate . about ABP The back end of the framework , We can see... In the menu section API Interface
Menu JSON It is dynamically acquired according to the role , Different roles correspond to different menu sets , And the menu is a multi-level tree list , You can define infinite levels of presentation ,JSON The formatted view looks like this .
The menu contains the routing key , We're at the front end JS Variables store all routing information , We filter the system route according to the menu key , As routing information available at the front end , route JS The definitions are as follows .
In order to effectively manage the set definition of system routing , We classify them into fine-grained module files for management , As shown below .
The general classification is written as follows .
Among them index.js It is to collect the routing files of all modules , As shown below .
After user login interface processing , First, get the available menu of the corresponding user role .
According to the menu list of characters , It'll go through the corresponding Action Get dynamic routing information （ Be careful , Here is to get the dynamic menu first , Then filter the local route , Dynamic routing information ）, After getting the dynamic route , Just set the route set that the front end can access , As shown in the following code .
With these new routes, it allows , The menu of front-end system can work normally , Otherwise, even if the interface shows the menu , You can't access a specific view page and jump to 404 page , Because there is no route .
In front-end interface processing , We go through Element Display dynamic menu information in the form of interface component , And combine the relationship between menu and route , To achieve the menu jump to the corresponding view of the process .
