Vue el-menu 进入详情页父级菜单不高亮
这个问题可能是由于你没有正确设置 router-link-active 类,以便在路由更改时高亮菜单项。
可以尝试在 el-menu 组件中添加 router 属性,并在每个 el-menu-item 组件中添加 index 属性,以便在路由更改时更新 router-link-active 类。
示例如下:
<el-menu router>
<el-menu-item index="/">首页</el-menu-item>
<el-submenu index="sub1">
<template slot="title">菜单1</template>
<el-menu-item index="/menu1-1">子菜单1-1</el-menu-item>
<el-menu-item index="/menu1-2">子菜单1-2</el-menu-item>
</el-submenu>
<el-submenu index="sub2">
<template slot="title">菜单2</template>
<el-menu-item index="/menu2-1">子菜单2-1</el-menu-item>
<el-menu-item index="/menu2-2">子菜单2-2</el-menu-item>
</el-submenu>
</el-menu>
然后,您可以在 CSS 中设置 router-link-active 类的样式,以便在当前路由匹配时高亮菜单项。
示例如下:
.el-menu-item--active,
.el-submenu--active > .el-submenu__title {
background-color: #f5f5f5;
}
这样,当您进入子菜单页面时,其父级菜单项将保持高亮状态。
原文地址: https://www.cveoy.top/t/topic/bgPt 著作权归作者所有。请勿转载和采集!