element-ui的NavMenu组件高亮显示问题

2,053 阅读1分钟

当我们用elemnt-ui的组件NavMenu组件做导航栏,给el-menu设置route属性为true时,只需给el-menu-item设置index值,点击el-menu-item的时候,就可以跳转到对应项的路由,default-active值就是当前路由的值$route.path

1629973433(1).png 1629973479(1).png 1629973168(1).png 1629973195(1).png 然鹅,当我们遇到一个菜单下边有多个子菜单,路由跳转到其中任一个都要保持该父菜单的高亮状态,由于当前父菜单el-menu-item的index值绑定了第一个子菜单或者它本身的path,无法同时匹配多个子菜单故不能保持高亮 1629972495(1).jpg 然后回去仔细阅读官方文档发现:

1629975063(1).png menu-item还有一个route属性,它的值是vue router对象,通过尝试发现:default-active匹配的是index值,当将el-menu的router属性设置为true时,跳转的路由如果没有设置route,则使用的是index的值,如果写了route,则路由使用的是route的值,通过这个特性,将此父菜单的index值设置为其子菜单的公共父级path,route值设置为要跳转的路由值,

1629975444(1).png

1629975544(1).png 当前default-active值设置为截取到的父级path,就会匹配到index值同为该path的menu-item,使其高亮,这样就解决了多个路由共用一个菜单高亮的问题。