Vue3+ElementPlus 根据路由 自动创建二级菜单
2024-04-23 11:57:06
最终效果
路由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-itemv-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-submenuv-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-itemv-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>
Vue3+ElementPlus 根据路由 自动创建二级菜单相关推荐
- vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
- python制作二级菜单_python之tkinter使用-二级菜单
# 菜单功能说明:二级菜单 import tkinter as tk from tkinter import messagebox root = tk.Tk() root.title('菜单选择') ...
- lisp封装为vlx方法_lisp 创建自定义菜单行数过多为什么不能打包成VLX
大师们.LISP创建菜单行数过多后怎么不能打包. ; 编译终止 ; 错误: 编译器发现致命错误 "菜单工具.lsp" _$ ;;; 说明:用lisp创建菜单 ;;; 作者:lang ...
- win右键菜单二级菜单
参考:https://blog.csdn.net/mzYangMao/article/details/82913316 一.创建对应的菜单组 创建二级菜单,必须在下面创建SubCommands 二.创 ...
- Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式 哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求 历史模式:putstate()和replaceState()方法入 ...
- Vue3+Element-Plus 实现左侧菜单折叠与展开功能 二七
1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 1. 在侧边栏内部,在侧边栏菜单区 ...
- 【Excel_006】利用数据验证创建二级关联下拉菜单
本篇博客介绍利用数据验证创建二级关联下拉菜单.可达到筛选器/切片器的效果 数据源 步骤 先做大类验证. 选中源数据,Ctrl+G 调出定位窗口,选择[定位条件],选择[常量] 选择[公式]-[根据所选 ...
- WPS创建二级拉下菜单
一.创建一二级菜单内容 创建省市分布表格 二.新建省份查询表格sheet3 选择有效性中的有效性 允许选择序列,来源选择sheet1中的省份,确定后就可以在sheet3中看到下拉框出现省份选项 三.配 ...
- Vue3 + Element Plus 实现动态二级菜单
一.数据库中创建菜单表 注意核心是 parent_menu_id记录了父菜单的 id. 插入一些数据: id name chinese_name parent_menu_id menu_status ...
最新文章
- linux -L -l区别,linux ls -l 详解[转]
- 一种获取过程调用堆栈信息的简单方法
- python PyQt5 sizeHint()
- PAI和Hologres的个性化推荐最佳实践
- 3.1.1_Spring如何加载和解析@Configuration标签
- app mvc框架_Google App Engine上的Spring MVC和REST
- [转]FFMPEG调节音频的音量大小，混音
- Spring Boot的启动器Starter详解
- 洛谷——P2820 局域网
- java 语法 —— final
- Android入门笔记03
- javascript 事件练习：封装兼容性添加、删除事件的函数、addEventListener用法
- oracle solaris 10 是什么,Oracle Solaris 10 操作系统
- 北京新房成交10月下旬暴增 二手房均价年内首次微涨
- 数据基础-索引和完整性（约束）
- 网吧组建及相关技术（无盘技术；VLAN；PacketTrace）
- HANA 存储过程 YTD
- 【锐捷】交换机，AC设备虚拟化（VSU、VAC）
- 小白声纹识别（说话人识别）探索
- 常用正则表达式大全 （转）