主体使用elementUI 的控件
底层子组件 SidebarItem.vue
采用递归的方式遍历层级
<template>
<div class="menu-wrapper">
<template v-for="item in routedata">
<div v-if="item.select">
<template v-if="item.subs && item.subs[0]">
<el-submenu :index="item.url">
<template slot="title"><i :class="item.icon"></i>{{ item.name }}</template>
<sidebar-item :routedata="item.subs"></sidebar-item>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.url">
<i :class="item.icon"></i>{{ item.name }}
</el-menu-item>
</template>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: { routedata: Array }
}
</script>
中层子组件 sidebar.vue
在这里进行折叠之类的配置
<el-menu
mode="vertical"
unique-opened
router
:default-active="onRoutes"
:collapse="isCollapse"
background-color="#304156"
text-color="#fff"
active-text-color="#409EFF"
@select="handleMenuSelected"
>
<sidebar-item :routedata="routedata"></sidebar-item>
</el-menu>
之后在需要的地方进行调用