Comment on page
Menu Settings
The Menu service can return a Menu array, and the navigation of the application is generated dynamically based on the Menu data and associated with the route.
The route path of each menu item is composed of the parent and child
route. Following is the type definition for the menu.export interface MenuTag {
color: string; // Background Color
value: string;
}
export interface MenuChildrenItem {
route: string;
name: string;
type: 'link' | 'sub' | 'extLink' | 'extTabLink';
children?: MenuChildrenItem[];
}
export interface Menu {
route: string;
name: string;
type: 'link' | 'sub' | 'extLink' | 'extTabLink';
icon: string;
label?: MenuTag;
badge?: MenuTag;
children?: MenuChildrenItem[];
}
Take the two levels menu as an example: the
route of the first-level item represents the path of the lazy module, and the route of the second-level item represents the path of the business component. So the final routing path of the business page is level_1_route/level_2_route. In a few cases, the three levels menu may be used.Here is an example of a three levels menu. If you use the three levels menu, the
route of the second-level item is allowed to be empty, and the final routing path is material/autocomplete. However, there is a problem in this case where the routing path cannot be associated with the third-level of the menu.{
"menu": [
{
"route": "material",
"name": "Material",
"type": "sub",
"icon": "favorite",
"children": [
{
"route": "",
"name": "Form Controls",
"type": "sub",
"children": [
{
"route": "autocomplete",
"name": "Autocomplete",
"type": "link"
}
]
}
]
}
]
}
Regarding the three levels menu, you can take a look at the routing path of the demo example. Open the following two paths respectively to check the menu changes:
Label color needs to be filled with a legal Material color value, such as
red-500, blue-900, see colors for details.Method | Parameter | Return | Description |
getAll | - | Menu[] | get menu |
set | menu: Menu[] | Menu[] | set menu |
add | menu: Menu | - | add a menu item |
getMenuItemName | stateArr: string[] | string | get the menu item name |
getMenuLevel | stateArr: string[] | string | get menu levels |
Last modified 11mo ago