vue项目多级菜单，如何渲染

1、当不确定菜单有多少层级的时候，第一时间就想到使用递归的方式渲染菜单，下面我们来看看如何实现。（使用技术：vue+iview）

2、使用ivew菜单组件，目前项目也用的是这个框架，不熟悉的小伙伴可以先看看这个菜单组件，熟悉的小伙伴我们继续向下看。

3、我的实现思路，判断没有子菜单单的时候，使用组件的正常渲染，如果有子菜单，那就需要加载这个组件 ，继续帮我们循环，走下一步

     <Menu
        ref="user"
        accordion
        width="auto"
      >
        <template v-for="(items,index) in leftNav">
          <!-- 有子菜单 -->
          <left-menu-nav
            v-if="items.children&&items.children.length!==0"
            :menuList="items"
            :key="items.name"
          ></left-menu-nav>
          <!-- 无子菜单 -->
          <menu-item
            v-else
            :key="index"
            :name="items.id"
          >
            <i class="iconfont" :class="items.icon"></i>
            {{items.name}}
          </menu-item>
        </template>
      </Menu>

4、接下来我们看看这个组件怎么写，主要实现思路跟上面的一样，有子菜单的时候，继续调这个组件，否则，就显示子菜单

<Submenu :name="menuList.id">
    <!-- 父级菜单 -->
    <template slot="title">
      <!-- <Icon :type="menuList.icon" /> -->
      <i class="iconfont" :class="menuList.icon"></i>
      <span>{{ menuList.name }}</span>
    </template>
    <template v-for="item in menuList.children">
      <!-- 如果还有子集，继续调用   -->
      <left-menu-nav
        v-if="item.children&&item.children.length!==0"
        :menuList="item"
        :key="item.index"
      ></left-menu-nav>
      <!-- 子菜单  -->
      <menu-item v-else :key="item.id" :name="item.id" >
        <!-- <Icon :type="item.icon"></Icon> -->
        <i class="iconfont" :class="item.icon"></i>
        {{item.name}}
      </menu-item>
    </template>
  </Submenu>

5、完整的代码如下
（1）、父组件view

  <Sider
      ref="side1"
      hide-trigger
      collapsible
      :collapsed-width="65"
      v-model="isCollapsed"
      :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}"
    >
      <Menu
        ref="user"
        :class="menuitemClasses"
        :active-name="$store.state.activeName"
        :open-names="openKeymenu"
        accordion
        v-show="!isCollapsed"
        theme="dark"
        width="auto"
      >
        <template v-for="(items,index) in leftNav">
          <!-- 有子菜单 -->
          <left-menu-nav
            v-if="items.children&&items.children.length!==0"
            :menuList="items"
            :key="items.name"
          ></left-menu-nav>
          <!-- 无子菜单 -->
          <menu-item
            v-else
            :key="index"
            :name="items.id"
            @click.native="dropMenu(JSON.stringify(items))"
          >
            <i class="iconfont" :class="items.icon"></i>
            {{items.name}}
          </menu-item>
        </template>
      </Menu>
    </Sider>

（2）、父组件的js

import leftMenuNav from "@/components/slidemenu";
export default {
  name: "leftMenu",
  components: {
    leftMenuNav
  },
}

（3）slidemenu.vue文件代码

<template>
  <Submenu :name="menuList.id">
    <!-- 父级菜单 -->
    <template slot="title">
      <!-- <Icon :type="menuList.icon" /> -->
      <i class="iconfont" :class="menuList.icon"></i>
      <span>{{ menuList.name }}</span>
    </template>
    <template v-for="item in menuList.children">
      <!-- 如果还有子集，继续调用   -->
      <left-menu-nav
        v-if="item.children&&item.children.length!==0"
        :menuList="item"
        :key="item.index"
      ></left-menu-nav>
      <!-- 子菜单  -->
      <menu-item v-else :key="item.id" :name="item.id">
        <!-- <Icon :type="item.icon"></Icon> -->
        <i class="iconfont" :class="item.icon"></i>
        {{item.name}}
      </menu-item>
    </template>
  </Submenu>
</template>
<script>
export default {
  name: "leftMenuNav",
  props: {
    menuList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
  
  },
  mounted() {
  }
};
</script>
<style  scoped>
</style>

6、只是自己的理解，如果 你有更好的意见或者建议，欢迎和大佬们一起交流学习。祝各位工作顺利，生活愉快。