el-menu 递归组件封装

为了实现多级菜单的递归调用，这样的话就不限制于层级
实现效果如下图所示

1.父组件调用，提供一个menu 用来递归
2.子组件主要是依靠 el-submenu 和 el-menu-item ,真正能够使用index作为路由跳转的其实是el-menu-item

父组件调用 mymenu
使用的menu的层级格式如下

<template>
  <div id="app">
    <el-menu
      class="elMenu"
      background-color="#333"
      text-color="#B0B0B2"
      active-text-color="#fff"
      :unique-opened="true"
      router
      ref="elMenu"
    >
      <!-- 递归动态菜单 -->
      <mymenu :menu="menuArr"></mymenu>
    </el-menu>
  </div>
</template>
<script>
import mymenu from "./cpns/my-menu.vue";
export default {
  components: {
    mymenu,
  },
  data() {
    return {
      menuArr: [
        {
          // 注意！注意！
          // 有children的菜单项，path不会使用的，所以path为什么都无所谓；
          // 没children的，即children的length等于0的，才会使用path属性做路由跳转
          name: "前端三大框架",
          path: "前端三大框架",
          icon: "el-icon-star-off",
          children: [
            {
              name: "vue页面",
              path: "/vue",
              icon: "el-icon-star-off",
              children: [],
            },
            {
              name: "react页面",
              path: "/react",
              icon: "el-icon-star-off",
              children: [],
            },
            {
              name: "angular页面",
              path: "/angular",
              icon: "el-icon-star-off",
              children: [],
            },
          ],
        },
        {
          name: "后端两大框架",
          path: "后端两大框架",
          icon: "el-icon-star-off",
          children: [
            {
              name: "Spring Boot页面",
              path: "/springBoot",
              icon: "el-icon-star-off",
              children: [],
            },
            {
              name: "Spring页面",
              path: "Spring页面",
              icon: "el-icon-star-off",
              children: [
                {
                  name: "MySql页面",
                  path: "/mysql",
                  icon: "el-icon-star-off",
                  children: [],
                },
                {
                  name: "Redis页面",
                  path: "/redis",
                  icon: "el-icon-star-off",
                  children: [],
                },
              ],
            },
            {
              name: "Mybatis页面",
              path: "/mybatis",
              icon: "el-icon-star-off",
              children: [],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss"></style>

mymenu组件如下

注意： 在template标签上使用v-for，:key="index"不能写在template标签上，因为其标签不会被渲染，会引起循环错误
所以这里是写在下一级的标签上

<template>
  <div>
    <!--  -->
    <template v-for="(item, index) in menu">
      <el-submenu
        :key="index"
        :index="item.path"
        v-if="item.children.length > 0"
      >
        <!--  -->

        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>

        <!-- 循环二级 -->
        <mymenu :menu="item.children"></mymenu>
      </el-submenu>

      <!-- 没有子菜单的 -->

      <el-menu-item :key="index" v-else :index="item.path">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "mymenu",
  props: {
    menu: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style></style>