位置: IT常识 - 正文

el-menu动态加载路由,菜单的解决方案(element级联动态加载)

编辑:rootadmin
el-menu动态加载路由,菜单的解决方案 先看需要实现的效果

推荐整理分享el-menu动态加载路由,菜单的解决方案(element级联动态加载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:el-cascader动态加载,element级联动态加载,elementui动态加载菜单,elementui动态加载菜单,element级联动态加载,element ui table动态加载数据,elementui动态加载菜单,element ui table动态加载数据,内容如对您有帮助,希望把文章链接给更多的朋友!

这里有一级也有二级菜单,注意二级菜单的父目录(”选项设置“点击不会跳转,只是展开目录),然后点击去详情页,需要跳到一个隐藏的路由,不在菜单展示的路由 还有一点要注意,就是这里有两个router-view,整个页面是一个router-view,可以由LoginView和HomeView替换(当前看到的页面),而HomeView下又有一个router-view,需要用来展示部门,系统,超时,员工设置,不合格品列表和不合格品详情页。

以上的信息均需要在数据库的表中体现 先看看直接写在代码里需要哪些操作

const routes = [ { path: '', name: 'login', component: LoginView, } , { component: HomeView, children: [ { path: '/home', name: '不合格品列表', component: BelowStandard }, { path: '/product/:id', name: '不合格品详情', component: BelowStandardDetail } ] }, { component: HomeView, name: '选项设置', children: [ { path: '/employee', name: '员工设置', component: EmployeeConfig, }, { path: '/department', name: '部门设置', component: DepartmentConfig }, { path: '/system', name: '系统设置', component: SystemConfig }, { path: '/warn', name: '超时提醒', component: WarmConfig } ] }, { component: HomeView, children: [ { path: '/statistics', name: '统计', component: DailyStatistics } ] }, { component: HomeView, children: [ { path: '/log', name: '日志管理', component: LogManager } ] },]

这是路由,当要动态从数据库加载时,就不能写在这

<el-menu router active-text-color="#ffd04b" background-color="#000" class="el-menu-vertical-demo" :default-active="this.$route.path" text-color="#fff" @open="" @close="" > <el-menu-item index="/home"> <template #title> 不合格品列表 </template> </el-menu-item> <el-sub-menu index="/subMenuConfig"> <template #title> 选项设置 </template> <el-menu-item index="/department">部门设置</el-menu-item> <el-menu-item index="/system">系统设置</el-menu-item> <el-menu-item index="/warn">超时设置</el-menu-item> <el-menu-item index="/employee">员工设置</el-menu-item> </el-sub-menu> <el-menu-item index="/statistics"> <span>统计</span> </el-menu-item> <el-menu-item index="/log"> <span>日志管理</span> </el-menu-item> </el-menu>

这是el-menu开启了路由功能,所以能跳转路由,当动态加载的时候,这部分需要改造成v-for

数据库el-menu动态加载路由,菜单的解决方案(element级联动态加载)

说明:parent_id为0的即是一级目录,但是一级目录里一部分可以直接展示界面,一部分是展开二级目录,我这是以component字段为home/HomeView.vue来区分是展示二级目录。

现在开始写后端程序,返回菜单的json格式数据。

List<Menu> menuList = menuMapper.getMenuByUserId(UserUtils.getLoginUser().getId());//根据ParentId分组Map<Integer, List<Menu>> map = menuList.stream().collect(Collectors.groupingBy(Menu::getParentId, TreeMap::new,Collectors.toList()));List<Menu> menus = map.get(0);//一级菜单menus.forEach(menu->{//给有二级菜单的目录设置children属性 List<Menu> children = map.get(menu.getId()); menu.setChildren(children);});return menus;

从数据库查询到的数据格式如图,然后分一级二级菜单处理后,再返回前端

[{"name": "不合格品列表","path": "/home","component": "product/BelowStandard.vue","orderNum": 1,"parentId": 0,"isHidden": false,"children": null},{"name": "选项设置","path": "/subMenuConfig","component": "home/HomeView.vue","orderNum": 2,"parentId": 0,"isHidden": false,"children": [{"name": "员工设置","path": "/employee","component": "config/EmployeeConfig.vue","orderNum": 1,"parentId": 2,"isHidden": false,"children": null},{"name": "部门设置","path": "/department","component": "config/DepartmentConfig.vue","orderNum": 2,"parentId": 2,"isHidden": false,"children": null},{"name": "系统设置","path": "/system","component": "config/SystemConfig.vue","orderNum": 3,"parentId": 2,"isHidden": false,"children": null},{"name": "超时提醒","path": "/warn","component": "config/WarmConfig.vue","orderNum": 4,"parentId": 2,"isHidden": false,"children": null}]},{"name": "统计","path": "/statistics","component": "statistics/DailyStatistics.vue","orderNum": 3,"parentId": 0,"isHidden": false,"children": null},{"name": "日志管理","path": "/log","component": "log/LogManager.vue","orderNum": 4,"parentId": 0,"isHidden": false,"children": null},{"name": "不合格品详情","path": "/product/:id","component": "product/BelowStandardDetail.vue","orderNum": 5,"parentId": 0,"isHidden": true,"children": null}]

前端得到数据之后进行处理,再添加到路由,过程中遇到一个问题,vue-router4版本去掉addRoutes换成addRoute带来的问题困扰我很久,详情可以查看另一篇笔记: 第一次push路由不匹配

初始化路由:

router.beforeEach((to, from, next) => {//配置路由守卫 if(to.path==='/'){ next() }else if(store.state.user.id){ initMenus(router,store,next,to) }else{ next({ path: '/',query: {redirect: to.path}}); }});export const initMenus = (router, store,next,to) => {//按F5刷新的话vuex里的会被清空,长度变为0 if (store.state.menu !== null) { next() }else { axios.get("/menu").then(response => { if (response) { let responseData = response.data if (responseData.flag) { store.state.menu = responseData.data initRoute(router,store.state) next({...to,replace:true})//解决router4版本的第一次路由不匹配问题 } else { this.$ElMessage.error('请求菜单失败') } } }) }}const initRoute = (router,state)=> { const loadView = view => {//这种引入方式控制台不会报警告 // 路由懒加载 return () => import(`@/views/${view}`) }; const menus = state.menu const firstLevelMenu = { children: [], component: loadView('home/HomeView.vue') } menus.forEach(menu=>{ menu.component = loadView(menu.component) if(menu.children === null || menu.children.length === 0){ firstLevelMenu.children.push(menu) }else{ menu.children.forEach(children=>{ children.component = loadView(children.component) }) router.addRoute(menu) } }) router.addRoute(firstLevelMenu)}

完成这些配置之后,路由就能动态加载了,然后取出vuex中存储的menu生成el-menu vuex中菜单大致如图

<el-menu router active-text-color="#ffd04b" background-color="#000" class="el-menu-vertical-demo" :default-active="this.$route.path" text-color="#fff" @open="" @close=""> <template v-for="route of this.$store.state.menu"> <template v-if="route.children === null || route.children.length === 0"><!--一级菜单--> <template v-if="!route.isHidden"> <el-menu-item :index = "route.path"> <span>{{route.name}}</span> </el-menu-item> </template> </template> <template v-else><!--二级菜单--> <template v-if="!route.isHidden"> <el-sub-menu :index = "route.path"> <template #title> <span>{{route.name}}</span> </template> <template v-for="children of route.children"> <template v-if="!children.isHidden"> <el-menu-item :index = "children.path"> <span>{{children.name}}</span> </el-menu-item> </template> </template> </el-sub-menu> </template> </template> </template></el-menu>

实现效果展示

本文链接地址:https://www.jiuchutong.com/zhishi/295950.html 转载请保留说明!

上一篇:Chat GPT5的主要介绍(gpts)

下一篇:网页表单文本框的自动填写(四种方法)(网页单行文本框)

  • 增距镜原理(增距)(增距镜原理及用途详解)

    增距镜原理(增距)(增距镜原理及用途详解)

  • 红米k40后面四个摄像头分别是什么(红米k四零后面的)

    红米k40后面四个摄像头分别是什么(红米k四零后面的)

  • 苹果死机怎么重启

    苹果死机怎么重启

  • 苹果特效短信看不到(苹果特效短信看不到内容)

    苹果特效短信看不到(苹果特效短信看不到内容)

  • 小米体脂秤测量身体成分失败(小米体脂秤测量原理)

    小米体脂秤测量身体成分失败(小米体脂秤测量原理)

  • 苹果喇叭震动清理灰尘(苹果喇叭震动清理灰尘app)

    苹果喇叭震动清理灰尘(苹果喇叭震动清理灰尘app)

  • 小米手机充电接口类型(小米手机充电接口坏了怎么修)

    小米手机充电接口类型(小米手机充电接口坏了怎么修)

  • 米8短信闪退(miui12短信闪退)

    米8短信闪退(miui12短信闪退)

  • 微信群主是第一个吗(微信群主是第一个头像吗)

    微信群主是第一个吗(微信群主是第一个头像吗)

  • 光信号是红色的为什么(光信号是红色的灯)

    光信号是红色的为什么(光信号是红色的灯)

  • 微信截屏对方有提醒(微信聊天截屏对方会知道吗)

    微信截屏对方有提醒(微信聊天截屏对方会知道吗)

  • qq音乐本地下载也不能听了(qq音乐本地下载的音乐怎么存到u盘)

    qq音乐本地下载也不能听了(qq音乐本地下载的音乐怎么存到u盘)

  • 手机照片是jpg格式吗(手机照片是jpg格式怎么办)

    手机照片是jpg格式吗(手机照片是jpg格式怎么办)

  • 华为下载不了谷歌商店(华为下载不了谷歌地图)

    华为下载不了谷歌商店(华为下载不了谷歌地图)

  • 最近访客30什么原因(访客记录只有最近一次)

    最近访客30什么原因(访客记录只有最近一次)

  • 苹果13.3.1系统怎么设置来电闪光灯(苹果13.6系统怎样)

    苹果13.3.1系统怎么设置来电闪光灯(苹果13.6系统怎样)

  • 步步高x30什么时候上市(步步高x30官网报价)

    步步高x30什么时候上市(步步高x30官网报价)

  • 抖音点赞立马取消有痕迹吗(抖音点赞立马取消再拉黑对方)

    抖音点赞立马取消有痕迹吗(抖音点赞立马取消再拉黑对方)

  • tnytl00是什么型号(TNYTL00是什么型号)

    tnytl00是什么型号(TNYTL00是什么型号)

  • 未识别的网络无法上网(未识别的网络 无法)

    未识别的网络无法上网(未识别的网络 无法)

  • ps怎么解锁图层锁(ps怎样解锁图层)

    ps怎么解锁图层锁(ps怎样解锁图层)

  • 苹果8摄像头模糊的原因(苹果8摄像头模糊怎么办)

    苹果8摄像头模糊的原因(苹果8摄像头模糊怎么办)

  • 就寝闹钟为什么不能删除(就寝闹钟为什么删不了)

    就寝闹钟为什么不能删除(就寝闹钟为什么删不了)

  • 探探手机号换了要验证码怎么办(探探手机号换了收不到验证码怎么办)

    探探手机号换了要验证码怎么办(探探手机号换了收不到验证码怎么办)

  • 小米商城预约有什么用(小米商城预约有优惠券吗)

    小米商城预约有什么用(小米商城预约有优惠券吗)

  • cad2016怎么切换到经典模式(cad2016怎么切换模型和图纸)

    cad2016怎么切换到经典模式(cad2016怎么切换模型和图纸)

  • 营业税金及附加计算公式
  • 印花税是什么时候交的钱
  • 补充登记法怎么写
  • 油票发票怎么查真伪
  • 生产经营年度汇缴申报时间
  • 税金及附加没有什么税
  • 注册资本没有实缴需要交印花税吗
  • 净流动负债和流动负债
  • 广告制作赚钱吗?
  • 罚款收据与通用的区别
  • 外商投资企业合并
  • 资本金可以出借吗
  • 农产品进项抵扣及申报表填写案例
  • 公司股东可以自己买保险吗
  • 报销增值税专票绿的
  • 年底结账会计处理
  • 非正常损失进项税额转出计算公式
  • 已付款未收到发票怎么做分录
  • 有了营业执照就可以买社保了吗
  • 增值税红字发票怎么做账
  • 股东赠与计入资本公积,交税
  • 公司技术服务部是干嘛的
  • 1697509422
  • 企业专票抵税
  • 工程发票开具所需资料有什么?
  • 基准收益率是
  • 公司收到个人的款怎么做账务处理
  • 股东投资如何做账务处理
  • 本月发生的费用,下月取得发票,怎么做账
  • 应届生能参考注册公司吗
  • PHP:oci_new_collection()的用法_Oracle函数
  • 合并财务报表抵消损益怎么理解
  • windows 11 build 21996.1 dev
  • PHP aes (ecb)解密后乱码问题
  • 存货的毁损通过什么科目核算
  • 公司注销前的资料怎么办
  • php 获取当前url
  • vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用
  • cd相关命令
  • php字符串编码转换
  • 报税系统清卡成功状态
  • 原始凭证必要时可以涂改
  • 外贸企业出口免税政策
  • 小企业会计准则调整以前年度费用分录
  • 还没报税就自动清卡了怎么办
  • 增值税申报表销项税额怎么算?
  • 接受捐赠物品的入账价值
  • 电子承兑接收了,但是后来怎么没有了
  • etcd4
  • 金蝶k3明细账如何查询
  • python数组合并并排序
  • 向分支机构支付融资利息可以扣除吗?
  • 以非货币性资产对外投资会计处理
  • 收到法人投资款需要什么手续
  • 公司注册资金认缴期限
  • 当月作废的发票是否需要报税
  • 企业投资期货亏损能抵税么
  • 安装生产流水线工程领用原材料
  • 现金支付中的现金是什么
  • 金税盘服务费可以抵扣增值税进项税额吗
  • 医药企业研发费用构成
  • 如何结转生产成本至库存商品
  • 关于废止有关排污收费规章和规范性文件的决定
  • 固定资产盘亏计入固定资产清理吗
  • Suse Linux 10中MySql安装与配置步骤
  • mysql事件id100
  • 利用sql函数生成数据
  • mysql 5.6.23 winx64.zip安装详细教程
  • windows 10预览版
  • 什么是bash命令
  • linux系统没有yum
  • win8尝试修复
  • Win10 Mobile RS2预览版14905更新内容大全:全新精致铃声
  • windows开启快速启动
  • python语言解析
  • 贸易公司的税率多少
  • 被标记为广告推销的电话能接吗
  • 2023年新乡契税补贴政策
  • 出租房地面铺什么
  • 鲨鱼记账咋记账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设