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

问题描述：

在Vue项目中使用了el-menu组件，在详情页中，父级菜单没有高亮显示，只有当前点击的子菜单高亮显示。

原因分析：

el-menu组件默认只会高亮当前点击的子菜单，而不会高亮父级菜单。

解决方法：

1.手动设置高亮

通过监听路由变化来手动设置父级菜单高亮。

在el-menu组件上添加 router 属性，然后在 router 对象上添加监听事件，当路由变化时，设置当前路由的父级菜单高亮。

例如：

<el-menu :router="true" default-active="2">
  <el-submenu index="1">
    <template slot="title">导航一</template>
    <el-menu-item-group>
      <template slot="title">分组一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template slot="title">选项4</template>
      <el-menu-item index="1-4-1">选项4-1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">导航二</el-menu-item>
  <el-menu-item index="3">导航三</el-menu-item>
</el-menu>

<script>
export default {
  data() {
    return {
      activeIndex: ''
    };
  },
  created() {
    this.$router.beforeEach((route, redirect, next) => {
      this.activeIndex = route.path;
      next();
    });
  }
};
</script>

2.使用 vue-router 的 keep-alive 组件

使用 vue-router 的 keep-alive 组件来保存父级菜单的状态，这样就可以实现父级菜单高亮显示。

例如：

<keep-alive>
  <router-view></router-view>
</keep-alive>

<script>
export default {
  name: 'detail',
  activated() {
    // 设置父级菜单高亮
    this.$parent.$children[0].setActiveItem('1');
  }
};
</script>

以上是两种解决方法，可根据具体情况选择适合的方法来解决问题。