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>

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