在Vue 3项目中使用Element Plus实现动态菜单,可以按照以下步骤进行: 1. 创建一个Vue 3项目,并安装Element Plus 首先,确保你已经安装了Vue CLI。然后,创建一个新的Vue 3项目: bash vue create my-vue3-project cd my-vue3-project 安装Element Plus: bash npm install element-plus --save 2. 在项目中创...
这里路由守卫我简化了实际登录前校验的一些逻辑,根据后台不同需求可以再合理进行添加,但是实际业务情景大同小异,拿到用户角色以后然后通过vuex封装的方法获取处理过的动态路由菜单,然后通过vue-router官方的方法addRoutes动态添加路由,这里next记得要走两次守卫,便于能确保动态路由添加进去有数据显示. 总结 这里面路由权限控制...
const pinia = createPinia();app.use(ElementPlus);app.use(router);app.use(pinia);// 确保在路由初始化完成后进行挂载，以便守卫beforeEach可以使用piniaawait router.isReady();app.mount("#app");接下来，让我们审视一下页面的布局。整体布局分为三个部分：顶部的导航栏（navbar）、左侧的菜单栏（sidebar）...
退出->用不同权限的账号登录->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 { ...
动态路由菜单流程图 检查登录过期并不是必须的,这里只是演示作用,如果后端有做的话,在请求拦截器里面判断更好 // 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"> ...
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plusel-menu组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单。 1 数据结构定义 1.1 菜单项数据结构 使用element-plusel-menu组件实现菜单,主要包括三个组件: el-menu:整个菜单; ...
vue3.x+element-plus 实现动态路由菜单功能 废话不多说直接上代码: 首先一般的后台管理都是有登录页面的 我们在登陆页面实现 具体的 接口调用 获取 动态菜单和权限 这里我们就简单mock一下 上代码: vue3.x-admin\src\mock\menu.json [ { "path": "/home",...