Vue3+ElementPlus 根据路由 自动创建二级菜单

最终效果

路由index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
import Index from '../views/Index.vue'
import Login from '../views/Login.vue'
import Layout from "../views/Layout/Layout.vue"

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    meta: {
      isShow: false
    },
    component: Index
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: {
      isShow: false
    }
  },
  {
    path: '/ContentIndex',
    name: 'ContentIndex',
    meta: {
      isShow: false,
      title: '首页',
      icon: 'el-icon-s-home'
    },
    component: Layout,
    children: [
      {
        path: '/ContentIndex',
        component: () => import('../views/ContentIndex.vue'),
        meta: {
          isShow: false,
          title: '首页',
          icon: 'el-icon-s-home'
        }
      }
    ]
  },
  {
    path: '/PersonalCenter',
    name: 'PersonalCenter',
    meta: {
      isShow: true,
      title: '个人中心',
      icon: 'el-icon-s-custom'
    },
    component: Layout,
    children:[
      {
        path: '/AccountSetting',
        name: 'AccountSetting',
        meta: {
          isShow: true,
          title: '账户设置',
          icon: 'el-icon-set-up'
        },
        component: () => import('../views/Personal/AccountSetting.vue')
      },
      {
        path: '/Identification',
        name: 'Identification',
        meta: {
          isShow: true,
          title: '信息认证',
          icon: 'el-icon-s-check'
        },
        component: () => import('../views/Personal/Identification.vue')
      },
      {
        path: '/MyCollect',
        name: 'MyCollect',
        meta: {
          isShow: true,
          title: '我的收藏',
          icon: 'el-icon-collection'
        },
        component: () => import('../views/Personal/MyCollect.vue')
      },
      {
        path: '/PersonalInfo',
        name: 'PersonalInfo',
        meta: {
          isShow: true,
          title: '个人资料',
          icon: 'el-icon-info'
        },
        component: () => import('../views/Personal/PersonalInfo.vue')
      },
      {
        path: '/PrivacySetting',
        name: 'PrivacySetting',
        meta: {
          isShow: true,
          title: '隐私设置',
          icon: 'el-icon-suitcase'
        },
        component: () => import('../views/Personal/PrivacySetting.vue')
      }
    ]
  },
  {
    path: '/WoDeWallet',
    name: 'WoDeWallet',
    meta: {
      isShow: true,
      title: '我的钱包',
      icon: 'el-icon-wallet'
    },
    component: Layout,
    children:[
      {
        path: '/Balance',
        name: 'Balance',
        meta: {
          isShow: true,
          title: '余额',
          icon: 'el-icon-umbrella'
        },
        component: () => import('../views/Wallet/Balance.vue')
      },
      {
        path: '/EarningsTiXian',
        name: 'EarningsTiXian',
        meta: {
          isShow: true,
          title: '收益提现',
          icon: 'el-icon-s-finance'
        },
        component: () => import('../views/Wallet/EarningsTiXian.vue')
      },
      {
        path: '/Hcoin',
        name: 'Hcoin',
        meta: {
          isShow: true,
          title: 'H币',
          icon: 'el-icon-money'
        },
        component: () => import('../views/Wallet/Hcoin.vue')
      },
      {
        path: '/Coupon',
        name: 'Coupon',
        meta: {
          isShow: true,
          title: '优惠券',
          icon: 'el-icon-tickets'
        },
        component: () => import('../views/Wallet/Coupon.vue')
      },
      {
        path: '/MyWallet',
        name: 'MyWallet',
        meta: {
          isShow: true,
          title: '钱包',
          icon: 'el-icon-coin'
        },
        component: () => import('../views/Wallet/MyWallet.vue')
      }
    ]
  },
  {
    path: '/NeiRongChuangzuo',
    name: 'NeiRongChuangzuo',
    meta: {
      isShow: true,
      title: '内容创作',
      icon: 'el-icon-document'
    },
    component: Layout,
    children:[
      {
        path: '/PublishBlog',
        name: 'PublishBlog',
        meta: {
          isShow: true,
          title: '发布博客',
          icon: 'el-icon-folder-add'
        },
        component: () => import('../views/Produce/PublishBlog.vue')
      },
      {
        path: '/PublishQuestion',
        name: 'PublishQuestion',
        meta: {
          isShow: true,
          title: '发布问题',
          icon: 'el-icon-question'
        },
        component: () => import('../views/Produce/PublishQuestion.vue')
      },
      {
        path: '/UploadResource',
        name: 'UploadResource',
        meta: {
          isShow: true,
          title: '上传资源',
          icon: 'el-icon-house'
        },
        component: () => import('../views/Produce/UploadResource.vue')
      },
      {
        path: '/UploadVideo',
        name: 'UploadVideo',
        meta: {
          isShow: true,
          title: '上传视频',
          icon: 'el-icon-video-camera'
        },
        component: () => import('../views/Produce/UploadVideo.vue')
      }
    ]
  },
  {
    path: '/NeiRongGuanLi',
    name: 'NeiRongGuanLi',
    meta: {
      isShow: true,
      title: '内容管理',
      icon: 'el-icon-date'
    },
    component: Layout,
    children:[
      {
        path: '/BlogManage',
        name: 'BlogManage',
        meta: {
          isShow: true,
          title: '博客管理',
          icon: 'el-icon-document-copy'
        },
        component: () => import('../views/Manage/BlogManage.vue')
      },
      {
        path: '/CategoryManage',
        name: 'CategoryManage',
        meta: {
          isShow: true,
          title: '类别管理',
          icon: 'el-icon-notebook-2'
        },
        component: () => import('../views/Manage/CategoryManage.vue')
      },
      {
        path: '/CommentManage',
        name: 'CommentManage',
        meta: {
          isShow: true,
          title: '评论管理',
          icon: 'el-icon-chat-line-square'
        },
        component: () => import('../views/Manage/CommentManage.vue')
      },
      {
        path: '/QuestionManage',
        name: 'QuestionManage',
        meta: {
          isShow: true,
          title: '问答管理',
          icon: 'el-icon-microphone'
        },
        component: () => import('../views/Manage/QuestionManage.vue')
      },
      {
        path: '/ResourceManage',
        name: 'ResourceManage',
        meta: {
          isShow: true,
          title: '资源管理',
          icon: 'el-icon-takeaway-box'
        },
        component: () => import('../views/Manage/ResourceManage.vue')
      },
      {
        path: '/SubscribeManage',
        name: 'SubscribeManage',
        meta: {
          isShow: true,
          title: '订阅管理',
          icon: 'el-icon-present'
        },
        component: () => import('../views/Manage/SubscribeManage.vue')
      },
      {
        path: '/VidoManage',
        name: 'VidoManage',
        meta: {
          isShow: true,
          title: '视频管理',
          icon: 'el-icon-camera'
        },
        component: () => import('../views/Manage/VidoManage.vue')
      }
    ]
  },
  {
    path: '/ShuJuTongJi',
    name: 'ShuJuTongJi',
    meta: {
      isShow: true,
      title: '数据统计',
      icon: 'el-icon-view'
    },
    component: Layout,
    children:[
      {
        path: '/BlogData',
        name: 'BlogData',
        meta: {
          isShow: true,
          title: '博客数据',
          icon: 'el-icon-data-line'
        },
        component: () => import('../views/Statistics/BlogData.vue')
      },
      {
        path: '/DownloadData',
        name: 'DownloadData',
        meta: {
          isShow: true,
          title: '下载数据',
          icon: 'el-icon-sold-out'
        },
        component: () => import('../views/Statistics/DownloadData.vue')
      },
      {
        path: '/EarningsData',
        name: 'EarningsData',
        meta: {
          isShow: true,
          title: '收益数据',
          icon: 'el-icon-money'
        },
        component: () => import('../views/Statistics/EarningsData.vue')
      },
      {
        path: '/FansData',
        name: 'FansData',
        meta: {
          isShow: true,
          title: '粉丝数据',
          icon: 'el-icon-school'
        },
        component: () => import('../views/Statistics/FansData.vue')
      },
      {
        path: '/TopSearchEntry',
        name: 'TopSearchEntry',
        meta: {
          isShow: true,
          title: '热搜词条',
          icon: 'el-icon-pie-chart'
        },
        component: () => import('../views/Statistics/TopSearchEntry.vue')
      },
      {
        path: '/VisitedReport',
        name: 'VisitedReport',
        meta: {
          isShow: true,
          title: '受访报告',
          icon: 'el-icon-mobile'
        },
        component: () => import('../views/Statistics/VisitedReport.vue')
      }
    ]
  },
  {
    path: '/GongJu',
    name: 'GongJu',
    meta: {
      isShow: true,
      title: '工具',
      icon: 'el-icon-s-tools'
    },
    component: Layout,
    children:[
      {
        path: '/BlogMove',
        name: 'BlogMove',
        meta: {
          isShow: true,
          title: '博客搬家',
          icon: 'el-icon-s-promotion'
        },
        component: () => import('../views/Tools/BlogMove.vue')
      },
      {
        path: '/BlogSetting',
        name: 'BlogSetting',
        meta: {
          isShow: true,
          title: '博客设置',
          icon: 'el-icon-set-up'
        },
        component: () => import('../views/Tools/BlogSetting.vue')
      },
      {
        path: '/FansServe',
        name: 'FansServe',
        meta: {
          isShow: true,
          title: '粉丝服务',
          icon: 'el-icon-service'
        },
        component: () => import('../views/Tools/FansServe.vue')
      }
    ]
  },
  {
    path: '/Order',
    name: 'Order',
    meta: {
      isShow: false
    },
    component: Layout,
    children: [
      {
        path: '/Order',
        component: () => import('../views/MyOrder.vue'),
        meta: {
          title: '订单',
          icon: 'el-icon-s-order'
        }
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

页面 Layout.vue

<template> <el-container> <el-aside width="200px"> <div> <el-menu :router="true" :collapse="isCollapse" class="el-menu-vertical-demo" v-for="item in menuItems" :route="item.path" :key="item.name" :index="item.name">  <el-menu-item v-if="item.children && !item.meta.isShow" :index="item.name"> <i :class="item.children[0].meta.icon">{item.children[0].meta.title}} <el-submenu v-if="item.children && item.meta.isShow" index="item.name"> <template #title> <i :class="item.meta.icon">{item.meta.title}} <el-menu-item v-for="item2 in item.children" :route="item2.path" :key="item2.name" :index="item2.name"> <i :class="item2.meta.icon">{item2.meta.title}} name: 'Home', setup() { let menuItems = router.options.routes.filter(item => item.meta.isShow || item.children != null) console.info(menuItems) return { menuItems } } }  components:{ Layout } }