这个问题可能是由于你没有正确设置 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;
}

这样,当您进入子菜单页面时,其父级菜单项将保持高亮状态。

Vue el-menu 进入详情页父级菜单不高亮

原文地址: https://www.cveoy.top/t/topic/bgPt 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录