Vue Element UI el-menu 路由跳转父级菜单高亮丢失解决方案

当使用 vue-router 进行路由跳转时，el-menu 的父级高亮可能会丢失。这是因为 el-menu 默认只高亮当前路由对应的菜单项，而不高亮其父级菜单。要解决这个问题，可以在路由跳转时手动设置 el-menu 的高亮项。

方法一：使用 router-link-active 类名

在 el-menu 中使用 router-link-active 类名来设置高亮，这样可以自动高亮当前路由对应的菜单项及其父级菜单。

<template>
  <el-menu router>
    <el-submenu index='/parent'>
      <template slot='title'>Parent</template>
      <el-menu-item index='/parent/child'>Child</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

使用 router-link-active 类名：

<template>
  <el-menu router>
    <el-submenu index='/parent' class='router-link-active'>
      <template slot='title'>Parent</template>
      <el-menu-item index='/parent/child'>Child</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

注意：这种方法只适用于单层菜单结构，如果菜单结构较复杂，需要手动处理高亮。

方法二：手动设置 activeIndex

在路由跳转时，手动设置 el-menu 的 activeIndex 属性来实现高亮。

<template>
  <el-menu :default-active='$route.path' :default-openeds='openeds' @select='handleMenuSelect'>
    <el-submenu index='/parent'>
      <template slot='title'>Parent</template>
      <el-menu-item index='/parent/child'>Child</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      openeds: [],
      activeIndex: '',
    };
  },
  methods: {
    handleMenuSelect(index) {
      this.activeIndex = index;
    },
  },
  watch: {
    $route() {
      this.activeIndex = this.$route.path;
    },
    activeIndex(val) {
      this.$nextTick(() => {
        this.openeds = this.getActiveSubMenu();
      });
    },
  },
  mounted() {
    this.activeIndex = this.$route.path;
  },
  computed: {
    menu() {
      return this.$refs.menu;
    },
  },
  methods: {
    getActiveSubMenu() {
      const path = this.activeIndex.split('/');
      path.pop();
      const subMenuIndex = `/${path.join('/')}`;
      return [subMenuIndex];
    },
  },
};
</script>

在 el-menu 中设置 default-active='$route.path'，这样当路由跳转时，el-menu 会自动设置当前路由对应的菜单项为高亮。

然后在 el-menu 的 @select 事件处理函数中，将选中的菜单项的 index 赋值给 activeIndex。

在 watch 中监听 $route 和 activeIndex 的变化，当 activeIndex 变化时，通过 getActiveSubMenu 方法获取当前高亮菜单项的所有父级菜单，并将其赋值给 openeds，这样就可以实现高亮。

注意：这种方法适用于多层菜单结构，但需要手动处理高亮。