[JavaScript知识库]vue+element动态设置el-menu导航刷新页面保持当前菜单选中项及路由

两种方式

<el-menu :default-active="$route.path"></el-menu>

2.（1）、设置属性 :default-active=“activeIndex”
（2）、watch方法检测路由变化
（3）、created生命周期设置路由

<template>
  <div style="position: relative">
    <el-menu
      router
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="activeIndex"
    >
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>

    <Dropdown class="drop-content"></Dropdown>
    <router-view></router-view>
  </div>
</template>

<script>
import NavMenu from "./components/navMenu/navMenu.vue";
import Dropdown from "./components/Languages/index.vue";
export default {
  components: {
    NavMenu,
    Dropdown,
  },
  data() {
    return {
      activeIndex: "/",
      menuData: [
        {
          /* 一级*/
          entity: {
            id: 0,
            index: "",
            name: "",
            // icon: "el-icon-message",
            alias: this.$root.$t("menu.rack"),
          },
        },
        {
          /* 一级*/

          entity: {
            id: 1,
            index: "/materialControl",
            name: "materialControl",
            alias: this.$root.$t("menu.control"),
            value: "/material_control/index",
          },
          /*二级*/
        },
        {
          //一级
          entity: {
            id: 6,
            index: "/materialTest",
            name: "materialTest",
            alias: this.$root.$t("menu.test"),
            value: "/material_test/index",
          },
          //二级
        },
        {
          //一级
          entity: {
            id: 40,
            index: "/materialConfig",
            name: "materialConfig",
            alias: this.$root.$t("menu.maRConfig"),
            value: "/material_config/index",
          },
          //er级
        },
        {
          //一级
          entity: {
            id: 41,
            index: "/materialAdmin",
            name: "materialAdmin",
            alias: this.$root.$t("menu.materialAdmin"),
            value: "/material_admin/index",
          },
          //er级
        },
      ],
    };
  },
  // 检测路由变化
  watch: {
    $route() {
      this.setCurrentRoute();
    },
  },

  created() {
    this.setCurrentRoute();
  },
  methods: {
    setCurrentRoute() {
      this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
    },
  },
};
</script>

NavMenu 中的代码：

<template>
  <div class="navMenu">
    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->

      <el-menu-item
        v-if="!navMenu.childs && navMenu.entity"
        :key="navMenu.entity.id"
        :data="navMenu"
        :index="navMenu.entity.index"
      >
        <i :class="navMenu.entity.icon"></i>
        <span slot="title">{{ navMenu.entity.alias }}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu
        @click.native="goto(navMenu.entity.value)"
        v-if="navMenu.childs && navMenu.entity"
        :key="navMenu.entity.id"
        :data="navMenu"
        :index="navMenu.entity.name"
      >
        <template slot="title">
          <i :class="navMenu.entity.icon"></i>
          <span> {{ navMenu.entity.alias }}</span>
        </template>
        <!-- 递归 -->
        <NavMenu :navMenus="navMenu.childs"></NavMenu>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  props: ["navMenus"],
  data() {
    return {};
  },
  methods: {
    goto(path) {
      if (path) {
        this.$router.push(path);
      }
    },
  },
};
</script>

参考文章：https://blog.csdn.net/nongcunqq/article/details/108715672