vue3+elementplus侧边栏menu递归遍历子菜单

原本侧边栏写的子菜单没有用递归实现，导致代码比较多，修改也比较麻烦。于是就想改成递归的，代码如下（用了自动导入组件的插件）

NavMenu菜单组件

<template>
    <!-- 菜单（有子级菜单）-->
    <template v-for="(item, index) in menus">

        <el-sub-menu :index="item.id + ''" v-if="item.children && item.children.length > 0" :key="item.path">
            <template #title>
                <el-icon>
                    <Icon :icon="item.icon" />
                </el-icon>
                <span>{{ item.name }}</span>
            </template>
            <NavMenu :menus="item.children">
            </NavMenu>
        </el-sub-menu>
        <!-- 菜单（没有子级菜单）-->
        <el-menu-item :index="item.path" :key="item.id" v-else>
            <el-icon>
                <Icon :icon="item.icon" />
            </el-icon>
            <template #title>
                <span>{{ item.name }}</span>
            </template>
        </el-menu-item>

    </template>
</template>
<script setup>
const props = defineProps(['menus'])
const Icon = (props) => {
    if (props.icon) {
        return h(props.icon)
    }
    return h("span")
}
</script>
<style scoped>
/*菜单关闭箭头样式*/
    .el-sub-menu :deep(.el-sub-menu__icon-arrow) {
        transform: rotate(-90deg) !important;
    }

    /*菜单展开箭头样式*/
    .el-sub-menu.is-opened> :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
        transform: rotate(0deg) !important;
    }

.el-menu .is-opened> :deep(.el-sub-menu__title) {
    color: #3471FF;
}

/* 侧边栏收起的样式 */
/* .el-menu--collapse {
    display: none;
} */

/*隐藏箭头 */
/* .el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
} */
/*隐藏文字*/
/* .el-menu--collapse .el-sub-menu__title span {
  display: none;
} */
</style>

侧边栏主体

<template>
  <div style="height: 53.125rem;">
    <el-menu :collapse="isCollapse" :unique-opened="true" active-color="#3471FF" router>
      <!-- 菜单组件，递归 -->
      <NavMenu :menus="menus"></NavMenu>

      <!-- 收起 -->
      <el-menu-item @click="isCollapse = !isCollapse" index>
        <el-icon>
          <Icon :icon="IconIndent" v-if="isCollapse" />
          <Icon :icon="IconDedent" v-else />
        </el-icon>
        <span>收起导航</span>
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script setup>
import menus from "./menus.js"
import IconDedent from "~icons/fa/dedent"
import IconIndent from "~icons/fa/indent"

const Icon = (props) => {
  if (props.icon) {
    return h(props.icon)
  }
  return h("span")
}

const isCollapse = ref(false)
const screenWidth = ref(window.innerWidth)
const handleResize = () => {
  screenWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener("resize", handleResize)
})

//watch监听屏幕宽度的变化，进行侧边栏的收缩和展开
watch(screenWidth, (newValue, oldValue) => {
  if (newValue < 992) {
    isCollapse.value = true
  } else {
    isCollapse.value = false
  }
})
</script>

<style scoped>
/* 侧边栏去掉竖线 */
.el-menu {
  border-right: 0;
}
</style>

menu的数据，大体看看就行，我数据写的有点多

import IconDashboard from "~icons/fa/dashboard"
import IconYen_sign from "~icons/fa-solid/yen-sign"
import Iconpencil_square from "~icons/fa/pencil-square"
import IconShare_alt_square from "~icons/fa/share-alt-square"
import IconClock from "~icons/fa-solid/clock"
import IconLink from "~icons/fa-solid/link"
import IconCalculator from "~icons/fa/calculator"
import IconCog from "~icons/fa/cog"
import IconChain from "~icons/fa/chain"
import IconBar_chart from "~icons/fa/bar-chart"
import IconBitbucket_square from "~icons/fa/bitbucket-square"
import IconSitemap from "~icons/fa-solid/sitemap"
import IconFolder from "~icons/fa-solid/folder"
import IconFolder_minus from "~icons/fa-solid/folder-minus"
import IconSync from "~icons/fa-solid/sync"
import IconUndo_alt from "~icons/fa-solid/undo-alt"
import IconUndo from "~icons/fa-solid/undo"
import IconExchange from "~icons/fa-solid/exchange-alt"
import IconWindow_close from "~icons/fa-solid/window-close"

export default [
  {
    name: "个人中心",
    id: "0",
    icon: IconDashboard,
    path: "/home",
  },
  {
    name: "模具变更调价",
    id: "1",
    icon: IconYen_sign,
    children: [
      {
        name: "提报明细",
        id: "1-1",
        path: "/hdyMoldSubmitLevel1",
      },
      {
        name: "模具信息表",
        id: "1-2",
        path: "/hdyModeInfo",
      },
      {
        name: "模具模块号关系表",
        id: "1-3",
        path: "/hdyMoldMaterialRelationship",
      },
      {
        name: "计算明细",
        id: "1-4",
        path: "/hdyMoldComputationDetail",
      },
    ],
  },
  {
    name: "HDY交互结果",
    id: "2",
    icon: IconExchange,
    children: [
      {
        name: "HDY价格进系统",
        id: "2-1",
        path: "/hdyPriceEntrySystem",
      },
      {
        name: "HDY配额进系统",
        id: "2-2",
        path: "/hdyQuoteEntrySystem",
      },
      {
        name: "HDY中标价进系统",
        id: "2-3",
        path: "/hdyBidPriceEntrySystem",
      },
    ],
  },
  {
    name: "资源置换结果",
    id: "3",
    icon: IconSync,
    children: [
      {
        name: "中标商价格进系",
        id: "3-1",
        path: "/ebsPriceEntrySystem",
      },
      {
        name: "中标价进系统",
        id: "3-2",
        path: "/ebsBidPriceEntrySystem",
      },
      {
        name: "配额进系统",
        id: "3-3",
        path: "/ebsQuoteEntrySystem",
      },
    ],
  },
  {
    name: "价格纠偏管理",
    id: "4",
    icon: Iconpencil_square,
    children: [
      {
        name: "不同模块商同料不同价",
        id: "4-1",
        path: "/hdyDifferentPriceDifferenceSameMaterial",
      },
      {
        name: "相同模块商同料不同价",
        id: "4-2",
        path: "/hdyDifferentPriceDifferenceSameMaterialtwo",
      },
      {
        name: "长期未降价",
        id: "4-3",
        path: "/hdyLongTermNoPriceCutOff",
      },
      {
        name: "海达源联动价差",
        id: "4-4",
        children: [
          {
            name: "提报明细",
            id: "4-4-1",
            path: "/hdyPriceMarginScene",
          },
          {
            name: "价差计算明细",
            id: "4-4-2",
            path: "/hdyPriceMarginDetailPriceDiff",
          },
          {
            name: "无价差计算明细",
            id: "4-4-3",
            path: "/hdyPriceMarginDetailPriceSame",
          },
          {
            name: "错误日志",
            id: "4-4-4",
            path: "/hdyPriceMarginDetailPriceLog",
          },
        ],
      },
      {
        name: "衍生号价格联动",
        id: "4-5",
        children: [
          {
            name: "衍生号与基准号的关系",
            id: "4-5-1",
            path: "/hdyDrivativeBenchmarkRelationship",
          },
          {
            name: "衍生号联动显差明细",
            id: "4-5-2",
            path: "/hdyDerivateHome",
          },
          {
            name: "衍生号与基准号差异对比",
            id: "4-5-3",
            path: "/hdyDerivateBenchmarkContrast",
          },
        ],
      },
      {
        name: "模块与子件价格联动",
        id: "4-6",
        path: "/hdyBcComponentEntrySystem",
      },
      {
        name: "衍生同价异号",
        id: "4-7",
        children: [
          {
            name: "同价异号对应关系",
            id: "4-6-1",
            path: "/hdySamePriceDifferentCodeRelationship",
          },
          {
            name: "同价异号显差报表",
            id: "4-6-2",
            path: "/hdySamePriceDifferentCodeHome",
          },
        ],
      },
      {
        name: "多次调价异常处理",
        id: "4-8",
        path: "/hdyPriceChangeRecord",
      },
      {
        name: "计数器预警",
        id: "4-9",
        path: "/hdySharePricingDetail",
      },
      {
        name: "购销BOM变更预警",
        id: "4-10",
        path: "/BOMchangewarning",
      },
      {
        name: "同零件部位不同BOM报警",
        id: "4-11",
        path: "/hdySamePartsDifferentBOMAlarm",
      },
      {
        name: "降本挖掘联动",
        id: "4-12",
        children: [
          {
            name: "预案管理",
            id: "4-12-1",
            path: "/ProcurementPlan",
          },
          {
            name: "降本录入",
            id: "4-12-2",
            path: "/hdyReduceCostsInputSecond",
          },
          {
            name: "降本显差",
            id: "4-12-3",
            path: "/hdyAuthorsShowDifference",
          },
        ],
      },
    ],
  },
  {
    name: "价格联动管理",
    id: "5",
    icon: IconChain,
    children: [
      {
        name: "购销联动",
        id: "5-1",
        children: [
          {
            name: "提报明细",
            id: "5-1-1",
            path: "/hdyBuyAndSellSystem",
          },
          {
            name: "原材料价差",
            id: "5-1-2",
            path: "/hdyPriceMargin",
          },
          {
            name: "BOM单耗",
            id: "5-1-3",
            path: "/hdyPricePlate",
          },
          {
            name: "购销计算明细",
            id: "5-1-4",
            path: "/hdyPriceDetail",
          },
          {
            name: "板材模块计算明细",
            id: "5-1-5",
            path: "/hdyPricePlateDetail",
          },
        ],
      },
      {
        name: "原材料联动",
        id: "5-2",
        children: [
          {
            name: "提报明细",
            id: "5-2-1",
            path: "/hdyLinkageSubmit",
          },
          {
            name: "联动规则",
            id: "5-2-2",
            path: "/hdyLinkageRule",
          },
          {
            name: "协议管理",
            id: "5-1-3",
            path: "/hdyProtocolSupervise",
          },
          {
            name: "BOM管理",
            id: "5-1-4",
            path: "/hdyBomSupervise",
          },
          {
            name: "原材料管理",
            id: "5-1-5",
            path: "/hdyRawStockSupervise",
          },
          {
            name: "四通阀原材料基价",
            id: "5-1-6",
            path: "/hdyMatnrReferencePrice",
          },
          {
            name: "四通阀基准价",
            id: "5-1-7",
            path: "/hdySapPrice",
          },
          {
            name: "计算明细",
            id: "5-1-7",
            path: "/hdyBomClassCalculationDetail",
          },
        ],
      },
      {
        name: "包装箱联动",
        id: "5-3",
        children: [
          {
            name: "提报明细",
            id: "5-3-1",
            path: "/hdyStandardCountBoxSubmit",
          },
          {
            name: "计算明细",
            id: "5-3-2",
            path: "/hdyStandardCountBoxCalculate",
          },
          {
            name: "标准联动规则",
            id: "5-3-3",
            path: "/hdyStandardLinkageRule",
          },
          {
            name: "原材料管理",
            id: "5-3-4",
            path: "/hdyStandardRawMaterialManagement",
          },
          {
            name: "标准核算BOM管理",
            id: "5-3-5",
            path: "/hdyStandardCountBom",
          },
          {
            name: "标准核算计算明细",
            id: "5-3-6",
            path: "/hdyStandardCountCalculateDetail",
          },
          {
            name: "标准核算管理",
            id: "5-3-7",
            path: "/hdyStandardCountManagement",
          },
        ],
      },
      {
        name: "原材料联动(含加工费)",
        id: "5-4",
        children: [
          {
            name: "提报明细",
            id: "5-4-1",
            path: "/hdyFoilPresentation",
          },
          {
            name: "协议管理",
            id: "5-4-2",
            path: "/hdyFoilConsultativeManagement",
          },
          {
            name: "联动规则",
            id: "5-4-3",
            path: "/hdyFoilLinkageRule",
          },
          {
            name: "加工费标准",
            id: "5-4-4",
            path: "/hdyFoilStandard",
          },
          {
            name: "模块规格",
            id: "5-4-5",
            path: "/hdyFoilMaterial",
          },
          {
            name: "汇率信息维护",
            id: "5-4-6",
            path: "/hdyFoilRate",
          },
          {
            name: "原材料价格维护",
            id: "5-4-7",
            path: "/hdyFoilMatnr1",
          },
          {
            name: "计算明细",
            id: "5-4-8",
            path: "/hdyFoilDetail",
          },
        ],
      },
      {
        name: "锁铜管理",
        id: "5-5",
        children: [
          {
            name: "提报明细",
            id: "5-4-1",
            path: "/hdyBcSuotongSubmitDetail",
          },
          {
            name: "加工费标准",
            id: "5-4-2",
            path: "/hdyBcSuotongProcessFee",
          },
          {
            name: "BOM管理",
            id: "5-4-3",
            path: "/hdyBcSuotongBomManagement",
          },
          {
            name: "汇率信息维护",
            id: "5-4-4",
            path: "/hdyBcSuotongRate",
          },
          {
            name: "锁铜价格关系表",
            id: "5-4-5",
            path: "/hdyBcSuotongPrice",
          },
          {
            name: "计算明细",
            id: "5-4-6",
            path: "/hdyBcSuotongCalDetail",
          },
        ],
      },
    ],
  },
  {
    name: "价格核算管理",
    id: "6",
    icon: IconCalculator,
    children: [
      {
        name: "按定价标准核算",
        id: "6-1",
        children: [
          {
            name: "提报明细",
            id: "6-1-1",
            path: "/hdyStandardCountBusinessScenario",
          },
          {
            name: "EBS标准号信息维护",
            id: "6-1-2",
            path: "/hdyStandardCountEbsInfo",
          },
          {
            name: "PLM信息录入",
            id: "6-1-3",
            path: "/hdyStandardCountPlmInfo",
          },
          {
            name: "计算明细",
            id: "6-1-4",
            path: "/hdyStandardCountCalculateInfo",
          },
        ],
      },
      {
        name: "大宗钢板价格核算",
        id: "6-2",
        children: [
          {
            name: "提报明细",
            id: "6-2-1",
            path: "/hdySteelScene",
          },
          {
            name: "定尺料BOM管理",
            id: "6-2-2",
            path: "/hdySteelBom",
          },
          {
            name: "年度数据",
            id: "6-2-3",
            path: "/hdySteelYear",
          },
          {
            name: "定尺料原材料价差",
            id: "6-2-4",
            path: "/hdySteelInterfaceFixedSize",
          },
          {
            name: "彩板原材料价差",
            id: "6-2-5",
            path: "/hdySteelColorBoard",
          },
          {
            name: "计算明细",
            id: "6-2-6",
            path: "/hdySteelDetail",
          },
        ],
      },
    ],
  },
  {
    name: "日常数据管理",
    id: "7",
    icon: IconBar_chart,
    children: [
      {
        name: "价格业务场景",
        id: "7-1",
        path: "/hdyPriceBusinessScenario",
      },
      {
        name: "其他SAP业务场景",
        id: "7-2",
        path: "/hdyOtherBusinessScenarios",
      },
      {
        name: "创智部品互转",
        id: "7-3",
        path: "/hdyDailyDataCreativeComponentsSameMaterial",
      },
      {
        name: "配额业务场景",
        id: "7-4",
        path: "/hdyQuotaBusinessScenario",
      },
      {
        name: "业务类型",
        id: "7-5",
        path: "/hdyDailyDataConfig",
      },
      {
        name: "维护配置",
        id: "7-6",
        path: "/hdyMaintenanceConfiguration",
      },
    ],
  },
  {
    name: "有效期管理",
    id: "8",
    icon: IconClock,
    path: "/hdyBcEffectTimeEntrySystem",
  },
  {
    name: "物料组有效管理",
    id: "9",
    icon: IconBitbucket_square,
    path: "/hdyMaterialGroupTime",
  },
  {
    name: "无效数据管理",
    id: "10",
    icon: IconWindow_close,
    path: "/hdyBcInvalidDataBusinessScenarios",
  },
  {
    name: "技改管理",
    id: "11",
    icon: IconCog,
    path: "/hdyTechnicalTransformationManagement",
  },
  {
    name: "返利管理",
    id: "12",
    icon: IconUndo,
    children: [
      {
        name: "返利对账管理",
        id: "12-1",
        path: "/hdyBcRebate",
      },
      {
        name: "返利场景配置",
        id: "12-2",
        path: "/hdyBcRebateScene",
      },
      {
        name: "返利协议录入",
        id: "12-3",
        path: "/hdyBcRebateProtocol",
      },
      {
        name: "返利兑现产业",
        id: "12-4",
        path: "/hdyCashDetailsFirst",
      },
      {
        name: "返利单耗补录",
        id: "12-5",
        path: "/hdyBcRebateDanhao",
      },
      {
        name: "返利到账管理",
        id: "12-6",
        children: [
          {
            name: "返利入账管理",
            id: "12-6-1",
            path: "/hdyInvoiceEntryFirst",
          },
          {
            name: "返利折价管理",
            id: "12-6-2",
            path: "/hdyBcRebateDiscountFirst",
          },
        ],
      },
      {
        name: "返利状态总表",
        id: "12-7",
        path: "/hdyStateSummary",
      },
      {
        name: "空压低价管理",
        id: "12-8",
        path: "/hdyBcRebateKydj",
      },
    ],
  },
  {
    name: "新返利管理",
    id: "13",
    icon: IconUndo_alt,
    children: [
      {
        name: "返利对账管理",
        id: "13-1",
        path: "/hdyBcRebateNew",
      },
      {
        name: "返利协议录入",
        id: "13-2",
        path: "/hdyBcRebateProtocolNew",
      },
      {
        name: "返利入账管理",
        id: "13-3",
        path: "/hdyInvoiceEntryFirstNew",
      },
      {
        name: "返利状态总表",
        id: "13-3",
        path: "/hdyStateSummaryNew",
      },
    ],
  },
  {
    name: "OEM小微数据管理",
    id: "14",
    icon: IconShare_alt_square,
    path: "/hdyBusinessScenario",
  },
  {
    name: "流程总览",
    id: "15",
    icon: IconSitemap,
    children: [
      {
        name: "流转流程一览",
        id: "15-1",
        path: "/unfinishList",
      },
      {
        name: "完成流程一览",
        id: "15-2",
        path: "/finishList",
      },
      {
        name: "用户明细",
        id: "15-3",
        path: "/user",
      },
    ],
  },
  {
    name: "常规报表管理",
    id: "16",
    icon: IconFolder,
    children: [
      {
        name: "成本中心报表",
        id: "16-1",
        path: "/hdyBcLifecyclePrice",
      },
      {
        name: "未闭环一级表二级表",
        id: "16-2",
        path: "/noCloseOneTwoTable",
      },
    ],
  },
  {
    name: "底层报表管理",
    id: "17",
    icon: IconFolder_minus,
    children: [
      {
        name: "全生命周期",
        id: "17-1",
        path: "/hdybcFullLifeCircle",
      },
      {
        name: "降本维度展示",
        id: "17-2",
        path: "/hdyBcReducedDimensionDisplay",
      },
      {
        name: "价格变动异常",
        id: "17-3",
        path: "/hdyAbnormalPriceChange",
      },
      {
        name: "涨价申请统计",
        id: "17-4",
        path: "/priceIncrease",
      },
      {
        name: "用户登录统计",
        id: "17-5",
        path: "/hdyBcUserMonitor",
      },
      {
        name: "原材料联动测算",
        id: "17-6",
        children: [
          {
            name: "提报明细",
            id: "17-6-1",
            path: "/hdyRMSubmitDetail",
          },
          {
            name: "计算明细",
            id: "17-6-2",
            path: "/hdyRMCalculationDetail",
          },
          {
            name: "原材料管理",
            id: "17-6-3",
            path: "/hdyRMPriceAdjustment",
          },
        ],
      },
      {
        name: "T+13周成本估算",
        id: "17-7",
        children: [
          {
            name: "联动原材料行情预测",
            id: "17-7-1",
            path: "/hdyLinkagePrice",
          },
          {
            name: "购销原材料价格预测",
            id: "17-7-2",
            path: "/hdyBcPurchaseAndSale",
          },
          {
            name: "直供大宗采购价预测",
            id: "17-7-3",
            path: "/hdyBcDirectSupply",
          },
          {
            name: "模块价格调整预测",
            id: "17-7-4",
            path: "/hdyModule",
          },
          {
            name: "设计项目预测",
            id: "17-7-5",
            path: "/hdyBcDesignEntry",
          },
          {
            name: "模块价格预测汇总展示",
            id: "17-7-6",
            path: "/hdyLinkageAllShow",
          },
        ],
      },
    ],
  },
  {
    name: "二三级物料联动管理",
    id: "18",
    icon: IconLink,
    children: [
      {
        name: "二三级物料BOM表",
        id: "18-1",
        path: "/hdyMaterialBom",
      },
      {
        name: "二三级物料价格库",
        id: "18-1",
        path: "/hdyMaterialBomPrice",
      },
      {
        name: "EBS价格进系统",
        id: "18-2",
        path: "/hdyEbsPrice",
      },
      {
        name: "二三级调价",
        id: "18-3",
        path: "/hdyPriceAdjustment",
      },
      {
        name: "二三级物料显差",
        id: "18-4",
        path: "/hdyPriceShowdiff",
      },
      {
        name: "提报明细",
        id: "18-5",
        path: "/hdySubmit",
      },
      {
        name: "计算明细",
        id: "18-6",
        path: "/MaterialLinkage_hdyBomClassCalculationDetail",
      },
    ],
  },
]

过程中有个问题一直没搞明白，就是开启路由后，应该通过index去跳转，但是用item.path跳转会报错，说什么props传值让index是undifne。一直没搞明白，后来改为item.id就可以成功跳转了。蛮奇怪的。因为id里都是数字，但确实实现跳转了。