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

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

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

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

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

<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-navv-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

<Siderref="side1"hide-triggercollapsible:collapsed-width="65"v-model="isCollapsed":style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}"><Menuref="user":class="menuitemClasses":active-name="$store.state.activeName":open-names="openKeymenu"accordionv-show="!isCollapsed"theme="dark"width="auto"><template v-for="(items,index) in leftNav"><!-- 有子菜单 --><left-menu-navv-if="items.children&&items.children.length!==0":menuList="items":key="items.name"></left-menu-nav><!-- 无子菜单 --><menu-itemv-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-navv-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>