最终效果

路由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"></i>
              <span>{{item.children[0].meta.title}}</span>
          </el-menu-item>

          <!-- 二级子菜单 -->
          <el-submenu
            v-if="item.children && item.meta.isShow" index="item.name">
            <template #title>
              <i :class="item.meta.icon"></i>
              <span>{{item.meta.title}}</span>
            </template>
            <!-- 循环 -->
            <el-menu-item
              v-for="item2 in item.children" :route="item2.path" :key="item2.name" :index="item2.name">
              <i :class="item2.meta.icon"></i>
              <template #title>{{item2.meta.title}}</template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>
    <el-container>
      <el-header>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import router from '../../router'
export default {
  name: 'Home',
  setup() {
    let menuItems = router.options.routes.filter(item => item.meta.isShow || item.children != null)
    console.info(menuItems)
    return {
      menuItems
    }
  }
}
</script>

首页

<template>
  <layout></layout>
</template>

<script>
import Layout from "@/views/Layout/Layout";

export default {
  components:{
    Layout
  }
}
</script>