没折叠前的样式是这样的

折叠后的样式是这样的

代码如下：

<!-- 没有子路由 -->
    <template v-if="!item.children">
      <el-menu-item
        v-if="!item.meta.hidden"
        :index="item.path"
        @click="goRoute"
      >
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>
    <!-- 只有一个子路由 -->
    <template
      v-if="item.children?.length === 1 && item.children && item.path === '/'"
    >
      <el-menu-item
        v-if="!item.children[0].meta.hidden"
        :index="item.children[0].path"
        @click="goRoute"
      >
        <template #title>
          <el-icon>
            <component :is="item.children[0].meta.icon"></component>
          </el-icon>
          <span>{{ item.children[0].meta.title }}</span>
        </template>
      </el-menu-item>
    </template>

可以看出我的icon是放在了<template #title>里面，然而这样的方式让只有一个子路由和没有子路由的路由icon显示有问题。解决方法为将icon提取到该template标签外

<el-icon> 
    <component :is="item.children[0].meta.icon"></component> 
</el-icon> 
<template #title> 
    <span>{{ item.children[0].meta.title }}</span> 
</template>

这样就能解决了