test-web/src/layout/components/SidebarItem.vue

<template>
  <template v-for="item in list" :key="item.path">
    <!-- 父级菜单 -->
    <el-sub-menu
      v-if="item.children && item.children.length > 0"
      :index="item.title + ',' + item.path">
      <template #title>
        <item-ioc :icon="item.icon" />
        <span style="font-size: 14px">{{ item.title }}</span>
      </template>
      <el-menu-item-group>
        <sidebar-item :list="item.children"></sidebar-item>
      </el-menu-item-group>
    </el-sub-menu>

    <!-- 子项也负责跳转 -->
    <router-link style="text-decoration: none" v-else :to="{ name: `${item.path}` }">
      <el-menu-item class="el-menu-item" :index="item.title + ',' + item.path">
        <item-ioc v-if="item.icon" :icon="item.icon" />
        <template #title>
          <span style="font-size: 14px">{{ item.title }}</span>
        </template>
      </el-menu-item>
    </router-link>
  </template>
</template>
<script lang="ts" setup>
defineProps({
  list: {
    type: <any>Array,
    default: [],
  },
})
</script>
<style lang="less" scoped>
</style>