需求
我们在route文件中定义的路由是由子路由包裹进去的，它可能是无限级的。如何在vue的模板中渲染形成菜单栏。
如图：
解决方法
将菜单栏单独写成子组件（注意头部标签：element-plus中是el-menu）仍然在父组件中。将配置路由数据传入到子组件。子组件渲染一级路由。
一级路由再调用本身组件，从而递归的实现动态加载和无限级分类。
父组件代码
<el-menuclass="el-menu-vertical"@open="handleOpen"@close="handleClose"background-color="$el-aside-background" ><Menu :menuList="menuRoutes" /> </el-menu>
子组件代码
<template v-for="(item, index) in menuList" :key="index"><!-- 一级路由 --><template v-if="!item.children" ><el-menu-item v-if="!item.meta.isHidden" :index="item.path"><template #title><span>icon</span> {{ item.meta.title }}</template></el-menu-item></template><!-- 有子路由，但是只有一个 --><el-menu-itemv-if="item.children && item.children.length == 1 && !item.meta.isHidden":index="item.path"><template #title><span>{{ item.children[0].meta.title }}</span></template></el-menu-item><!-- 有子路由，并且有多个,递归调用自己 --><el-sub-menu:index="item.name"v-if="item.children && item.children.length > 1"><template #title><span>{{ item.meta.title }}</span></template><!-- 注意：这个需要一个组件名,并将子路由数据传入自身组件中，组件名在下面的script标签中用vue2语法定义 --><Menu :menuList="item.children" /></el-sub-menu></template>
