左侧菜单的渲染

方法一：嵌套着去写（这里只是涉及到三级）

<template>
    <template v-for="(item, index) in menuList" :key="index">
        <el-sub-menu v-if="item.children?.length" :index="item.path">
            <template #title>
                <el-icon>
                    <component :is="item.meta?.icon"></component>
                </el-icon>
                <span>{{ item.meta?.title }}
                </span>
            </template>
            <template v-for="(items, t) in item.children" :key="t">
                <el-sub-menu v-if="items.children?.length" :index="items.path">
                    <template #title>
                        <el-icon>
                            <component :is="items.meta?.icon"></component>
                        </el-icon>
                        <span>{{ items.meta?.title }}
                        </span>
                    </template>
                    <el-menu-item v-for="(it, ie) in items.children" :key="ie" :index="it.path">
                        <el-icon>
                            <component :is="it.meta?.icon"></component>
                        </el-icon>
                        <span>{{ it.meta?.title }}</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="items.path">
                    <el-icon>
                        <component :is="items.meta?.icon"></component>
                    </el-icon>
                    <span>{{ items.meta?.title }}</span>
                </el-menu-item>
            </template>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path">
            <el-icon>
                <component :is="item.meta?.icon"></component>
            </el-icon>
            <span>{{ item.meta?.title }}</span>
        </el-menu-item>
    </template>
</template>
<script lang="ts" setup>
defineProps(['menuList']);
</script>

方法二：递归的写法

1注册全局组件

import { createApp } from 'vue'


import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import Menu from './components/menu/Menu.vue'

const app = createApp(App)

app.component('Menu', Menu)

app.use(router)
app.use(ElementPlus)
app.mount('#app')

<template>
  <template v-for="item in props.routes" :key="item.path">
    <template v-if="!item.children || item.children.length < 1">
      <el-menu-item :index="item.path">
        <el-icon>
          <component :is="item.meta?.icon" />
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </el-menu-item>
    </template>

    <el-sub-menu v-else :index="item.path">
      <template #title>
        <el-icon>
          <component :is="item.meta?.icon" />
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </template>
      <Menu :routes="item.children" />
    </el-sub-menu>
  </template>
</template>
<script setup lang="ts">

const props = defineProps(['routes'])
console.log(props.routes, '-----')



</script>