退出->用不同权限的账号登录->bug:这种情况下菜单是正常的,但是菜单下的默认页却会莫名其妙的重复上一个账号的路径,这就是路由没有重置造成的问题。 例如:菜单A下有a1、a2、a3三个页面,管理员用户有所有权限,他去菜单A的默认页面是a1,即菜单A对应的路由的redirect指向了a1,普通用户只有a3页面的权限,但是在登录...
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 { ...
这是模拟的mock 菜单数据 我们在 登陆成功后 开始初始化 菜单 vue3.x-admin\src\views\login\Index.vue import { ref, watch, reactive, toRefs } from 'vue' import { ElLoading } from 'element-plus' import { useRoute, useRouter } from 'vue-router' import CookieUtil from 'cookie-tool-plug'...
不同路由高亮同一菜单 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"> <template #title> <el-icon><Menu /></el-icon> {{ menu.chineseN...
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标。而我的图标是全局导入的,默认使用官方的命名。在菜单栏使用图标,并且是动态渲染的,刚好用到图标组件名称是Menu时,点击带有这个图标名称的菜单,就出问题了,导致其他菜单不...
动态添加路由:将菜单列表转换为 Vue 路由格式的数据后,可以使用 router.addRoute 方法动态添加路由。 接下看下如何实现动态加载路由与菜单 前置 开始之前我们先安装全局状态管理pinia npm i pinia -s 然后main.ts中引入,同时将element-plus的 Icon 全局注册(这里后续就能直接使用图标了) ...
Vue3+ElementPlus+JWT+Axios+动态菜单路由2 P2 - 31:50 结论:大框架的结构是不会动的,所以结果是来改变models的结构,在这里先新建一个models的文件夹 在windows里根据不同的业务逻辑,搞对应的js文件(这里以user.js为例子) 第二个namespaced写错了 ...
动态路由菜单流程图 检查登录过期并不是必须的,这里只是演示作用,如果后端有做的话,在请求拦截器里面判断更好 // index.tsconstrouter=createRouter({// import.meta.env.BASE_URL 通过vite.config的base设置,默认为‘/’history:createWebHistory(import.meta.env.BASE_URL),routes:[{// 动态路由挂在main的下面...
在制作标签栏右击的选项中,使用右击选择不同标签的关闭但是el-tab-pane中,加入 @contextmenu.prevent="this.openContextMenu($event)"失效,而el-tabs有效,但是我就不清楚点的那个标签了
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plusel-menu组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。 1 数据结构定义 1.1 菜单项数据结构 使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单; ...