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

<template>
  <template v-for="(item, index) in list" :key="item.path">
    <!-- 父级菜单 -->
    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.title + ',' + item.path">
      <template #title>
        <Item />
        <span style="font-size:14px">{{ item.title }}</span>
      </template>
      <el-menu-item-group>
        <sidebarItem :list="item.children"></sidebarItem>
      </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 /> -->
        <template #title>
          <span style="font-size:14px">{{ item.title }}</span>
        </template>
      </el-menu-item>
    </router-link>

  </template>
</template>
<script lang="ts">
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting
  } from '@element-plus/icons-vue'
  import Item from './Item.vue'

  export default {
    name: 'SidebarItem',
    components: {
      Item
    },
    props: {
      list: {
        type: Array,
        default: function () {
          return []
        },
      },
    },
  }
</script>
<style lang="less" scoped>
</style>