When the NavMenu component of Elemnt-UI is used as the navigation bar, when the route attribute of El-Menu is set to true, only the index value of el-Menu-item is set. When clicking el-Menu-item, the route of the corresponding item can be jumped to. The default-active value is the current route value $route.path

However, when we encounter a menu with multiple submenus, the route jumps to any one of them to keep the parent menu highlighted. Because the index value of the current parent menu el-menu-item is bound to the first submenu or its own path, it cannot match multiple submenus at the same time, so it cannot keep the parent menu highlightedThen I went back and perused the official documents and found:

Menu-item also has a route attribute, whose value is the Vue Router object, which can be found by trying: Default-active matches the index value. When the router attribute of el-Menu is set to true, the index value is used for the jump route if route is not set. If route is written, the route value is used. Using this feature, set the index value of the parent menu to the path of its child menu’s common parent, and set the route value to the route to jump to.

If the current default-active value is set to the truncated parent path, the menu-item whose index value is the same as that of the path will be matched and highlighted. In this way, the problem that multiple routes share the same menu highlight is solved.