vue-web-frame/src/views/menu/index.vue

<template>
  <el-menu
    class="el-menu-demo el-menu--horizontal el-menu"
    :default-active="$route.path"
    background-color="rgb(4,12,11)"
    text-color="#fff"
    active-text-color="#05bb4c"
    mode="horizontal"
    router
  >
    <template v-for="(pItem, pIndex) in menu" :key="pIndex">
      <el-menu-item :index="pItem.path" v-if="!pItem.children?.length">
        <template #title>
          <i :class="pItem.icon" v-if="pItem.icon"></i>
          <span style="margin-left: 8px">{{ pItem.name }}</span>
        </template>
      </el-menu-item>
      <el-sub-menu :index="pItem.path" v-else>
        <template #title>
          <i :class="pItem.icon" v-if="pItem.icon"></i>
          <span style="margin-left: 8px">{{ pItem.name }}</span>
        </template>
        <el-menu-item
          v-for="(cItem, cIndex) in pItem.children"
          :index="pItem.path + '/' + cItem.path"
          :key="cIndex"
        >
          <template #title>
            <i :class="cItem.icon" v-if="cItem.icon"></i>
            <span style="margin-left: 8px">{{ cItem.name }}</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [],
    };
  },

  created() {
    this.renderRouter(["/", "/:catchAll(.*)"]);
  },

  mounted() {},

  methods: {
    // 渲染页面路由，所传参数为不需展示在菜单中供用户点击的菜单 path
    renderRouter(exclude) {
      let menu = [];
      this.$router.options.routes.forEach((ele) => {
        const findEle = exclude.some((excludePath) => {
          return excludePath === ele.path;
        });
        if (!findEle) menu.push(ele);
      });
      this.menu = menu;
    },
  },
};
</script>

<style>
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 150px !important;
}
</style>