Element Plus是一个基于Vue 3的组件库,它提供了丰富的UI组件,包括菜单(Menu)组件。动态菜单意味着菜单项(MenuItem)可以根据某些条件(如用户权限、路由配置等)动态生成,而不是静态地写在模板中。 2. 创建一个基本的Element Plus菜单组件 首先,我们需要在Vue组件中引入Element Plus的Menu和MenuItem组件,并创建一个基...
一:解决初次加载子菜单报错 No match found for location with path “xxx” 最近在做微型人事项目,进行到左边导航菜单动态加载部分,前端所有的子项都无法打开 以基本资料为例,点击会在控制台弹出如下警告信息: 教程中src/utils/menus.js内的initMenu方法从后台请求得到动态的菜单栏数据data,使用formatRoutes方法将data...
一.前端在routers中写好--所有--路由表 <前端控制路由>,登录时根据用户的角色权限来动态的显示菜单路由 二.前端通过调用接口请求拿到当前用户--对应权限的--路由表 <后端处理路由返回>,以动态的显示菜单路由 介绍第二种 (参考资料 segmentfault-大师兄) 左侧菜单可通过 ①本地mock假数据 ②easymock假数据 ③从...
下面是控制台输出router的结果 问题三:收缩菜单,右侧有明显的白线 .el-menu{//样式调整 border:none !important; } 问题四:菜单收缩卡顿 在el-menu中添加代码:collapse-transition="false" 问题五:动态图标 <component class="icons" :is="item.meta.icon" /> 下面是动态切换图标 <el-icon :size="25"> <...
菜单栏的渲染我们使用element plus中提供的Menu组件开发,其中el-menu中的el-sub-menu代表目录,el-menu-item则是能点击跳转的菜单。来看一下后端返回的菜单数据结构 image.png 由此可知,如果一条数据有children则说明它是目录,否则则是菜单,这样就好办了,我们可以判断每条数据有没有children有的话渲染el-sub-menu,没...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...
动态路由菜单流程图 检查登录过期并不是必须的,这里只是演示作用,如果后端有做的话,在请求拦截器里面判断更好 // index.tsconstrouter=createRouter({// import.meta.env.BASE_URL 通过vite.config的base设置,默认为‘/’history:createWebHistory(import.meta.env.BASE_URL),routes:[{// 动态路由挂在main的下面...
动态渲染多级嵌套菜单 点击菜单跳转页面 子菜单高亮,对应父级菜单也高亮 不同路由高亮同一菜单 1.2源码 地址:https://gitee.com/YanaDH/vue3-element-template/tree/master 路径: src/layout/components/sidebar/menu 2 sub-menu 组件 <template> <el-sub-menu :index="menu.name" v-if="menu.childMenu"> ...
1.3 本文右键菜单方式 本文使用element-plus自带的el-dropdown实现右键菜单 2 生成动态标签页 2.1 准备变量容器 import { ref } from 'vue' interface TabType { title: string //标签页显示名称 componentName: string //动态组件名 data: any //动态组件传参 } interface TabListType extends TabType { ...