element-ui中的el-menu选中项高亮:default-active属性不生效解决方法

"element-ui": "^2.13.2",

// layout 整体结构
// layout.vue

<template>
  <div>
    <div class="hearder">
      <horizontalNavigation class="left-contain"></horizontalNavigation>
    </div>
    <el-container>
      <div class="aside">
        <vertical-menu class="menu"></vertical-menu>
      </div>
      <el-main class="contain">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

// 第一种通过ref动态改变activeIndex值

<el-menu
    mode="vertical"
    background-color="#304156"
    router
    text-color="#ffffff"
    :collapse-transition="false"
    class="el-menu-vertical-demo"
    popper-append-to-body
    ref="kzMenu"
></el-menu>

<script>
export default {
  data() {
    return {};
  },
  created() {
    //   默认激活菜单第一项 通过horizontalNavigation Bus.$emit("listenToA", key)传值当前菜单路由
    Bus.$on("listenToA", this.getAData);
  },
  methods: {
    getAData(val) {
      //   console.log(`a组件传递过来的数据: ${val}`); //
      this.$refs.kzMenu.activeIndex = val;
    },
  },
  //监听执行
  watch: {
    //   监听路由状态并用ref直接改变activeIndex
    $route(route) {
      let paths = this.$route.path;
      this.$refs.kzMenu.activedIndex = path;
    },
  },
};
</script>

// 第二种大佬强势传参

// 父组件 layout.vue

<template>
  <div>
    <div class="hearder">
      <!-- 添加头部菜单change事件  -->
      <horizontalNavigation
        class="left-contain"
        @change="setMenuList"
      ></horizontalNavigation>
    </div>
    <el-container>
      <div class="aside">
        <!-- 添加传参 defaultKey menuList-->
        <vertical-menu
          class="menu"
          :key="defaultKey"
          :menu="menuList"
        ></vertical-menu>
      </div>
      <el-main class="contain">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuList: [],
      defaultKey: 1,
      obj: {},
    };
  },
  methods: {
    setMenuList(val) {
      this.menuList = this.obj[val];
      ++this.defaultKey;
    },
  },
};
</script>

// horizontalNavigation.vue组件

<el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        router
        @select="handleSelect"
        background-color="rgb(48, 101, 153)"
        text-color="#fff"
        active-text-color="#ffd04b"
      ></el-menu>
// 
handleSelect(key) {
    // 传值给父组件
    this.$emit("change", key);
},

// vertical-menu.vue组件

<template>
  <el-menu
    mode="vertical"
    background-color="#304156"
    text-color="#ffffff"
    :unique-opened="true"
    active-text-color="#ffd04b"
    :collapse-transition="false"
    class="el-menu-vertical-demo"
    :default-active="$route.path"
    router
  ></el-menu>
</template>
<script>
export default {
  props: {
    menu: {
      required: true,
      type: Array,
    },
  },
  data() {
    return {
      menuList: [],
    };
  },
};
</script>