ba_web/src/layout/components/SideBar/SideBarItem.vue

<template>
  <el-sub-menu v-if="route.children?.length > 0" :index="route.path">
    <template #title>
      <MenuItem :title="route.meta.title" :icon="route.meta.icon"></MenuItem>
    </template>
    <!---循环渲染--->
    <SideBarItem v-for="item in route.children" :key="item.path" :route="item"></SideBarItem>
  </el-sub-menu>

  <el-menu-item v-else :index="route.path">
    <MenuItem :title="route.meta.title" :icon="route.meta.icon"></MenuItem>
  </el-menu-item>
</template>

<script setup>
import MenuItem from './MenuItem.vue'
import { defineProps } from 'vue';
// 导入自身组件以支持递归调用
import { defineAsyncComponent } from 'vue'
const SideBarItem = defineAsyncComponent(() => import('./SideBarItem.vue'))

defineProps({
  route: {
    type: Object,
    required: true
  }
})
</script>

<style>
</style>