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

绝地灬酷狼 2023-01-16 14:30 668阅读 0赞

## 最终效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]

## 路由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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]: /images/20221022/f7444f20b8414da6bf89af287813161d.png