位置: 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)

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

  • 迎接九月的唯美句子(迎接九月的唯美句子)(迎接九月的唯美句子)

    迎接九月的唯美句子(迎接九月的唯美句子)(迎接九月的唯美句子)

  • 触手tv怎么直播(触手直播在哪)

    触手tv怎么直播(触手直播在哪)

  • 手机qq文件传输中断(手机qq文件传输失败)

    手机qq文件传输中断(手机qq文件传输失败)

  • 在微机系统中,麦克风属于什么设备(在微机系统中,I/O接口位于( )之间)

    在微机系统中,麦克风属于什么设备(在微机系统中,I/O接口位于( )之间)

  • 华为手机怎么设置时间和日期(华为手机怎么设置陌生号码打不进来)

    华为手机怎么设置时间和日期(华为手机怎么设置陌生号码打不进来)

  • 苹果手机微信发不了视频怎么回事(苹果手机微信发视频特别慢)

    苹果手机微信发不了视频怎么回事(苹果手机微信发视频特别慢)

  • 苹果手表背面灯一直亮是什么原因(苹果手表背面灯光红色)

    苹果手表背面灯一直亮是什么原因(苹果手表背面灯光红色)

  • 抖音视频怎么下载手机(抖音视频怎么下载到相册)

    抖音视频怎么下载手机(抖音视频怎么下载到相册)

  • 剪映如何只用音乐高潮(剪映如何只用音频播放)

    剪映如何只用音乐高潮(剪映如何只用音频播放)

  • 公众号改名字需要多久(公众号改名字需要多久能变过来)

    公众号改名字需要多久(公众号改名字需要多久能变过来)

  • 如何停止微信自动清理(如何停止微信自动续费)

    如何停止微信自动清理(如何停止微信自动续费)

  • 黑鲨2pro有小爱吗(黑鲨2有没有小爱同学)

    黑鲨2pro有小爱吗(黑鲨2有没有小爱同学)

  • vivos1pro是闪充么(vivos1pro是闪充吗)

    vivos1pro是闪充么(vivos1pro是闪充吗)

  • 手机yy怎么录音(手机yy如何录音)

    手机yy怎么录音(手机yy如何录音)

  • 苹果xs代表数字几(iphonexs的xs是什么意思)

    苹果xs代表数字几(iphonexs的xs是什么意思)

  • 爱奇艺注销手机步骤(爱奇艺注销手机号码要多久才能使用)

    爱奇艺注销手机步骤(爱奇艺注销手机号码要多久才能使用)

  • 苹果11是什么材质(苹果是什么材质)

    苹果11是什么材质(苹果是什么材质)

  • 苹果手机下载音乐在哪(苹果手机下载音乐怎么下载到本地)

    苹果手机下载音乐在哪(苹果手机下载音乐怎么下载到本地)

  • 移动td一lte版什么意思(中国移动td-lte收费)

    移动td一lte版什么意思(中国移动td-lte收费)

  • 苹果xr怎么设置自拍不反(苹果xr怎么设置陌生号码电话拦截)

    苹果xr怎么设置自拍不反(苹果xr怎么设置陌生号码电话拦截)

  • 智能电视连接wifi怎么看电视(智能电视连接wifi信号不好)

    智能电视连接wifi怎么看电视(智能电视连接wifi信号不好)

  • 与他人共同编辑文档(共同编辑app)

    与他人共同编辑文档(共同编辑app)

  • TensorBoard详解之安装使用和代码介绍(tensorboard作用)

    TensorBoard详解之安装使用和代码介绍(tensorboard作用)

  • 【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)(小程序项目开发流程)

    【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)(小程序项目开发流程)

  • 在python中如何求定积分(在Python中如何求坐标中的任意两个点的距离)

    在python中如何求定积分(在Python中如何求坐标中的任意两个点的距离)

  • 织梦Dedecms限制栏目列表生成的最大页数(织梦cms要钱吗)

    织梦Dedecms限制栏目列表生成的最大页数(织梦cms要钱吗)

  • 递延所得税资产和所得税费用的关系
  • 红字发票注明的进项税额转出
  • 纳税标准怎么算
  • 个人服务费发票几个点
  • 发票勾选是否为转内销凭证是什么意思
  • 豆粕适用税率
  • 增值税退税比例怎么算
  • 提供咨询服务的小规模企业是一般纳税人吗
  • 所得税季报利润表怎么填
  • 房地产公司环境
  • 无偿划拨资产涉税问题
  • 电脑怎么写记事本
  • 企业股权融资方式有
  • 砂石的资源税怎么算
  • 外出参加会议费用怎么算
  • 债券利息收入的增值税
  • 固定资产忘了折旧有什么影响
  • 一般代开增值税多少个点?
  • 应税服务计入什么科目
  • 金税三期退税
  • 没有认证的进项发票怎么入账
  • 其他应付款报表填列
  • 期间费用燃油费计入哪个项目?
  • 手续费进项可以抵扣吗
  • 印花税资金账簿税率
  • 应付职工薪酬的贷方表示什么
  • window10锁屏壁纸图片在哪
  • 如何在Excel中合并计算
  • 电脑装机光盘
  • 不符合条件的数据
  • dvdram是什么意思
  • kazaalite.exe是什么进程 kazaalite进程有什么用
  • 无偿转让股权如何做账
  • 金融性资产有哪些
  • thinkphp框架介绍
  • CUDA版本选择
  • 大前端2021
  • h5项目怎么打包成app
  • 增值税免税收入账务处理
  • 出口企业为什么免税又退税
  • 物流公司驾驶员工资计算方式
  • 会计为什么不能有0
  • 汽车维修费可以做差旅费吗
  • 财务专用章是干嘛用的
  • 新公司核税需要什么材料
  • 销售货款未收到会计分录
  • 现金流量表格式有几种
  • 视同销售和不视同销售的区别?
  • 生产车间的保险有哪些
  • 往来的款项性质有哪些
  • 对公账户如何转钱进去
  • 账簿按账页格式排序
  • sql server 数学函数
  • win8开机提示激活
  • ubuntu系统怎样
  • mac系统操作的小技巧
  • centos 安装方法
  • thinkpad如何安装win10
  • win7怎么添加自启动程序
  • centos支持中文
  • centos6.8修改主机名
  • win7报错0xc0000428
  • 电脑自带的groove音乐用不了
  • 不需要远程传输的文件
  • android view动画
  • unity3D游戏开发
  • node.js wss
  • 3行程序搞定SVM分类-用JAVA程序调用LibSVM API 最简单的示例
  • 刚开始学java的心得体会
  • redis基础教程
  • javascript零基础
  • Tiled GPU perf. warning: RenderTexture color surface (0x0) was not cleared/discarded
  • python中操作PDF的库
  • ActivityManagerService(四)
  • 夫妻双方房子契税怎么算
  • 2020年海南个人所得税新规定
  • 科研用地是否缴纳土地使用税
  • 石家庄水费阶梯价格表 2020
  • 居民个人从境外公司获得分红
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设