退出->用不同权限的账号登录->bug:这种情况下菜单是正常的,但是菜单下的默认页却会莫名其妙的重复上一个账号的路径,这就是路由没有重置造成的问题。 例如:菜单A下有a1、a2、a3三个页面,管理员用户有所有权限,他去菜单A的默认页面是a1,即菜单A对应的路由的redirect指向了a1,普通用户只有a3页面的权限,但是在登录...
左侧菜单部分代码home.vue: <template><el-container><el-aside width="collapse ? 200px : 70px"><el-button color="#626aef" @click="collapseToggle()"><el-icon><Expand v-if="collapse" /><Fold v-else /></el-icon></el-button><el-menu:collapse="collapse"default-active="2"class="el-...
获取菜单列表数据:调用菜单接口/getInfo获取路由列表数据。 渲染左侧菜单栏:使用递归的方式根据菜单列表数据格式来渲染左侧菜单栏(sidebar)。递归可以遍历菜单数据,根据数据的嵌套结构来递归渲染菜单的子菜单。 将菜单列表转换为 Vue 路由格式:在渲染菜单的过程中,需要将菜单列表数据转换为符合 Vue 路由的格式。Vue 路由...
1. 第一步:首先改写VUE中的模板,修改sidebarMenu.vue文件,文件具体目录建下图: 将Menu导航菜单组件的的二级嵌套结构改为三级嵌套,无非就是判断二级路由页面下是否有children属性及是否含有子元素,有的话直接v-for循环生成子元素标签,新结构如下: <template> <Menu ref="sideMenu" :active-name="$route.name" :op...
name: 'CustumVue' }) Element-Plus左侧菜单自动无限分级 首先菜单的格式如下:可能会从后端获取(如果不是已经处理好的结构需要递归处理一下,递归方法网上很,这里就不码了。) [{id:1,path:'/Home',name:'Home',component:() => import('xxxxxx'),meta:{title:'首页',icon:'Plus'},children:[{...
这里el-menu添加router属性的意思就是让我们的菜单点击的时候启用路由功能,el-menu-item的index属性配置要和我们的路由的path一一对应 再一方面就是我们的主内容区域要添加路由视图,这样路由切换的时候页面会显示在这个区域里 <el-mainclass="content"><!-- 放置表格 --><router-view/></el-main> ...
本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题,没有技术深度,但全都是解决实际问题的干货,可以当作是问题手册以备后用。本人日常工作偏后端开发,因此,文中的一些前端术语描述可能不严谨,敬请谅解。重点是:这里记录的解决方案都是行之有效果的,拿来即可用 ...
页面比较简单,主要分为左侧的菜单栏,顶部的导航栏(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签栏,之后就是主页面显示区域。 我们在layout目录下创建一个index.vue来作为我们的入口文件 代码语言:javascript 复制 <template><!--左侧menu--><sidebar id="guide-sidebar"class="...
vue-element-plus-admin 左侧菜单通过按钮事件添加新菜单,缺少顶部和左侧布局是什么原因? 页面代码:// 添加菜单 const addMenuItem = () => { let index = parseInt(Math.random() * 1000000) const obj = { path: 'xitong/id=' + index, component: () => import...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...