When we use Vue.js, we will definitely use routing when creating a single-page application. Vue Router is the official routing manager of Vue.js. When we develop the framework, we need to combine the functions provided by the Vue Router routing manager to design And implement the configuration of menus in the system.
1. Implementation principle
- The first-level menu resource.resourceUrl is Layout, resource.resourcePageName: The first-level menu is configured as RouteView, the second-level menu is configured as PageView, PageView displays the label header, and the default is RouteView.
- Secondary menus and resource.resourceUrl containing submenus are nested
- Resource.resourcePath starting with https:// and http:// is used to jump to external links.
- Regarding the nesting of sub-routes:
Condition:
For example, a data table page is the parent page, and then editing or creating a new page opens a new page child, and the new page child serves as the sub-routing page of the data table page route parent. At this time, if you do not add it to the parent data table page, the sub-page editing page child will not be displayed. When the data table parent page parent and the editing page child are used as sibling routes, they can be displayed.
If you choose to add it to the parent page, the display style needs to be modified, and the content of the parent page parent is overwritten with the content of the displayed child page.
Another way is to create a new parent page super, and then use the data table parent page parent and the editing subpage child as sibling subpages. The parent page super will jump to the parent page parent by default. This can be achieved. The child page child overrides the parent page. The effect of page parent.
Here you need to modify the dynamic routing jump method: determine whether the path resource.resourceUrl of the current routing request is one of the sub-route resourcePath. If it is one of them, it is also the parent route.
Some thoughts on front-end routing control:
When configuring the routing menu, first distinguish it by function: system->subsystem->functional module->menu, button (jump link), interface.
The function module is set to Layout (RouterView in AntDesign, etc.), the menu has a nested parent menu, no jump is performed, and the sub-menu is used to jump. There are also nested menus, which are used to make other jumps after entering the page. At this time, a general parent menu needs to be set. The nested parent menu and the submenu belong to the same level to jump normally.
2. User Guide
Under the RBAC permission model, resource permission menu configuration is an essential function, and its logic is very simple: create new resource permissions that require permission control access (menu) –> assign resource permissions to roles (menu) –> assign roles to users. In this way, the authority control function of whether the user has access to a certain resource authority (menu) is realized.
- Resource permission configuration
Parameter Description:
● Parent resource: select the parent resource of the current operation resource, if it is a menu type, then it is the parent menu.
● Resource name: the name information of the resource, if it is a menu type, then it is the name of the menu.
● Resource ID: the unique ID of the resource, which is used to distinguish between background and front-end page authentication.
● Resource type: the type of resource: module, menu, button, interface.
● Resource icon: This is mainly used for menu types. You can configure the icons displayed in the menu. These icons are configured in the src/assets/icons/svg directory of the front-end code.
● Routing address URL: The address displayed in the address bar of the browser, that is, the routing address of the front-end page.
● Request path: request the service interface of the background.
● Resource sorting: if it is a menu type, here is the display order of the menu.
● Whether to cache: whether to cache the page, if you leave and enter again, the information on the page remains unchanged.
● Whether to display: Some are menu types, but they are not displayed in the menu bar, and may be accessed through links or other methods. Here you can set it to No.
● Remark information: Remark information.
- Assign resource permissions to roles and decide which roles have this resource permissions
- Assign a role to the user. If the user already has the permissions for this role, you do not need to modify it here.
