Links
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[];
}

Route Path

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

Label color needs to be filled with a legal Material color value, such as red-500, blue-900, see colors for details.

API

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