需求

我们在route文件中定义的路由是由子路由包裹进去的，它可能是无限级的。如何在vue的模板中渲染形成菜单栏。

如图：

解决方法

将菜单栏单独写成子组件（注意头部标签：element-plus中是el-menu）仍然在父组件中。将配置路由数据传入到子组件。子组件渲染一级路由。

一级路由再调用本身组件，从而递归的实现动态加载和无限级分类。

父组件代码

<el-menu
    class="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>&nbsp;{{ item.meta.title }}
                </template>
            </el-menu-item>
        </template>

        <!-- 有子路由，但是只有一个 -->
        <el-menu-item
            v-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>