位置: IT常识 - 正文

(二) Vue3 + Element-Plus 实现动态菜单栏

编辑:rootadmin
(二) Vue3 + Element-Plus 实现动态菜单栏 系列文章目录系列介绍:Vue3 + Vite + TS 从零开始学习项目搭建:(一) Vue3 + Vite + TS 项目搭建实现动态菜单栏:(二) Vue3 + Element-Plus 实现动态菜单栏实现动态面包屑:(三) Vue3 + Element-Plus 实现动态面包屑实现动态标签页:(四) Vue3 + Element-Plus 实现动态标签页实现动态主题色切换(demo):(五) Vue3 + Element-Plus 实现动态主题色切换踩坑记录(持续更新):(六) Vue3 踩坑记录文章目录系列文章目录一、引入依赖二、目录结构三、核心代码1. auth-api.js2. permission.js3.sidebar.vue4.router.js四、最终效果一、引入依赖

推荐整理分享(二) Vue3 + Element-Plus 实现动态菜单栏,希望有所帮助,仅作参考,欢迎阅读内容。

(二) Vue3 + Element-Plus 实现动态菜单栏

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

开始前请确保已经安装以下依赖:

VueX$ npm i vuex --saveVue-Router$ npm i vue-router --saveNProgress$ npm i nprogress --save二、目录结构|-src -- 主目录---|api -- Ajax请求统一存放目录------|auth-api.js -- 路由数据获取接口---|js -- JS脚本------|permission.js -- NProgress进度条数据处理---|layout -- 页面布局组件------|sidebar.vue -- 侧边栏布局组件---|store -- VueX------|router.js -- 路由全局常量三、核心代码1. auth-api.jsimport request from '@/js/request'export default { routers(data) { return request.post('/routers', data) }}2. permission.jsimport router from '../router'import store from '../store'import NProgress from 'nprogress'import 'nprogress/nprogress.css'import { getCookie } from './cookie'import Layout from '../layout/index.vue'import ParentView from '../components/ParentView/index.vue'NProgress.configure({ showSpinner: false })const whiteList = ['/login', '/register']router.beforeEach((to, from, next) => { NProgress.start() if (getCookie()) { if (to.path === '/login') { next({ path: '/' }) NProgress.done() } else { if (store.state.user.menus.length === 0) { store.dispatch('GetInfo').then(res => { const menuIds = res.data.menuIds store.dispatch('GenerateRoutes', menuIds).then(routes => { filterRoutes(routes) routes.forEach(route => { router.addRoute(route) }) next({ ...to, replace: true }) }) }).catch(() => { next() }) } else { next() } } } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { next(`/login?redirect=${to.fullPath}`) NProgress.done() } }})router.afterEach(() => { NProgress.done()})const filterRoutes = (routes) => { const accessRoutes = routes.filter(route => { let modules = import.meta.glob('../views/**/*.vue') if (route.component) { if (route.component === 'ParentView') { route.component = ParentView } else if (route.component === 'Layout') { route.component = Layout } else { route.component = modules[`../views/${route.component}.vue`] } } if (route.children && route.children.length) { filterRoutes(route.children) } return true }) return accessRoutes}3.sidebar.vue<template> <el-aside width="210px" class="aside-wrapper"> <el-scrollbar> <el-menu :default-active="route.path" mode="vertical" :collapse-transition="false" router class="menu-wrapper"> <el-sub-menu v-for="menu in menus" :key="menu.path" :index="menu.path"> <template #title> <el-icon><component :is="menu.meta.icon" /></el-icon> <span>{{ menu.name }}</span> </template> <el-menu-item v-for="child in menu.children" :key="child.path" :index="child.path"> <template #title> <el-icon><component :is="child.meta.icon" /></el-icon> <span>{{ child.name }}</span> </template> </el-menu-item> </el-sub-menu> </el-menu> </el-scrollbar> </el-aside></template><script lang="ts" setup>import { computed } from 'vue'import { useStore } from 'vuex'import { useRoute } from 'vue-router'const store = useStore()const route = useRoute()const menus = store.state.router.accessRoutes</script>4.router.jsimport { authApi } from '@/api'import constantRoutes from '@/router/routes'const router = { state: { routes: [], accessRoutes: [] }, mutations: { SET_ROUTES: (state, routes) => { state.routes = routes }, SET_ACCESSROUTES: (state, accessRoutes) => { state.accessRoutes = accessRoutes } }, actions: { GenerateRoutes({ commit }, roleIds) { return new Promise(resolve => { authApi.routers(roleIds).then(res => { const accessRoutes = res.data filterRoutes('', accessRoutes) const routes = constantRoutes.concat(accessRoutes) commit('SET_ROUTES', routes) commit('SET_ACCESSROUTES', accessRoutes) resolve(routes) }) }) } }}const filterRoutes = (path, routes) => { routes.forEach(route => { const routePath = route.path if (route.parentId !== '0') { route.path = path + "/" + routePath } if (route.children && route.children.length) { filterRoutes(routePath, route.children) } })}export default router四、最终效果

本文链接地址:https://www.jiuchutong.com/zhishi/285057.html 转载请保留说明!

上一篇:Linux basename命令的使用详解(linux-base)

下一篇:石楠花丛中的一只欧亚红松鼠,英格兰 (© Christopher Drabble/Alamy)(石楠花 开花)

  • 喜马拉雅青少年模式在哪(喜马拉雅青少年模式密码忘记了怎么办)

    喜马拉雅青少年模式在哪(喜马拉雅青少年模式密码忘记了怎么办)

  • iphonex闹钟如何设置成自己的音乐(iponex闹钟设置铃声)

    iphonex闹钟如何设置成自己的音乐(iponex闹钟设置铃声)

  • oppok5微信视频怎样调美颜(oppo微信视频权限怎么开启)

    oppok5微信视频怎样调美颜(oppo微信视频权限怎么开启)

  • 手机号被别人注册滴滴(手机号被别人注册微信了怎么办)

    手机号被别人注册滴滴(手机号被别人注册微信了怎么办)

  • ps打字如何换行(ps打字如何换行打字)

    ps打字如何换行(ps打字如何换行打字)

  • 苹果x屏幕不亮电话还能打通(苹果14屏幕常亮)

    苹果x屏幕不亮电话还能打通(苹果14屏幕常亮)

  • 实况照片有什么用(实况照片什么意思)

    实况照片有什么用(实况照片什么意思)

  • vivox27充电慢怎么办(vivox21充电慢)

    vivox27充电慢怎么办(vivox21充电慢)

  • 小米8青春版可以插内存卡吗(小米8青春版可以开空调吗)

    小米8青春版可以插内存卡吗(小米8青春版可以开空调吗)

  • 网线红灯一直闪没网络怎么办(网线红灯一直闪,怎么办)

    网线红灯一直闪没网络怎么办(网线红灯一直闪,怎么办)

  • 个人热点频率什么意思(热点频段越高越好吗)

    个人热点频率什么意思(热点频段越高越好吗)

  • 删除的联系人能恢复吗(删除的联系人能找回来吗)

    删除的联系人能恢复吗(删除的联系人能找回来吗)

  • 微信如何取消视频号(微信如何取消视频号功能)

    微信如何取消视频号(微信如何取消视频号功能)

  • 微信应用未适配小米手机怎么办(微信应用未适配怎么办)

    微信应用未适配小米手机怎么办(微信应用未适配怎么办)

  • ssl工作在哪一层(ssl协议在哪一层)

    ssl工作在哪一层(ssl协议在哪一层)

  • 支付宝积分兑换的东西在哪里找物流信息

    支付宝积分兑换的东西在哪里找物流信息

  • 饿了么可以开电子发票吗(饿了么开电瓶可以工资扣)

    饿了么可以开电子发票吗(饿了么开电瓶可以工资扣)

  • 如何制作苹果快捷指令(苹果快捷指令制作表情包)

    如何制作苹果快捷指令(苹果快捷指令制作表情包)

  • qq音乐听歌时间怎么看(怎么刷qq音乐听歌时间)

    qq音乐听歌时间怎么看(怎么刷qq音乐听歌时间)

  • qq号冻了怎么解冻(qq号冻结了怎么解)

    qq号冻了怎么解冻(qq号冻结了怎么解)

  • 火山直播记录怎么删除(火山直播怎么看之前的回放)

    火山直播记录怎么删除(火山直播怎么看之前的回放)

  • 支付宝花呗还款日怎么取消预约(支付宝花呗还款日当天最晚几点还款)

    支付宝花呗还款日怎么取消预约(支付宝花呗还款日当天最晚几点还款)

  • 陌陌怎么凭昵称查找人?(陌陌凭昵称查找人?)

    陌陌怎么凭昵称查找人?(陌陌凭昵称查找人?)

  • word2007怎么显示分页符(word2007怎么显示目录)

    word2007怎么显示分页符(word2007怎么显示目录)

  • 蓝牙耳机有一边没声音怎么办(蓝牙耳机有一边不亮了是为什么)

    蓝牙耳机有一边没声音怎么办(蓝牙耳机有一边不亮了是为什么)

  • 西瓜视频怎么取消关注(西瓜视频怎么取名字才能吸引人?)

    西瓜视频怎么取消关注(西瓜视频怎么取名字才能吸引人?)

  • 息税前利润增长率与财务杠杆系数
  • 财税筹划课程
  • 小规模经营租赁开票税率
  • 应付账款应收账款
  • 利润表中的资产减值损失包括哪些
  • 小规模纳税人销售收入会计分录
  • 会计凭证借方和贷方怎么填
  • 垫付的医疗费保险多久可以报销
  • 印花税按什么征收
  • 持有至到期投资改名为
  • 在产品,产成品和库存商品的区别
  • 可抵扣进项税怎么抵扣
  • 代理运费进项税额抵扣
  • 为职工垫付的款项属于其他应收款吗
  • 合同资产和工程存货的区别
  • 1697510110
  • 以前年度亏损在哪个报表体现
  • 局域网的工作模式及特点
  • php nsq
  • 经营出租的机器设备需要计提折旧吗
  • vue父组件调用子组件的方法报错
  • 最高跑分纪录的显卡是什么
  • 世界上寿命最长的灯泡是什么品牌
  • 委托代销商品两种方式会计分录
  • uniapp开发常用案例
  • 企业所得税利息费用的扣除标准
  • squid 启动命令
  • 营业额增长率公式
  • 增值税怎么算出来的
  • 递延所得税资产和所得税费用的关系
  • 体检的收据是什么
  • 待核销基建支出并入哪个科目
  • 国外货物进入保税仓需要办理什么
  • 个税专项附加扣除标准调整
  • 企业开外币户有什么用
  • 电商的优惠券怎么做账
  • 工地上购买的零食叫什么
  • 固定资产低于净值出售会计处理
  • 背书的银行承兑汇票怎么做账
  • 收到土地使用权的租金
  • 固定资产正常报废与非正常报废的会计处理基本相同
  • 装修费摊销年限规定会计分录
  • 投资利润率多少算合理
  • 地租钱不付如何为
  • 补发工资如何计税计算
  • 跨年收入冲销如何申报
  • 固定资产处置的会计科目
  • 企业利润分配明细表
  • 收到发票没付款,能打赢官司吗
  • mysql中union用法
  • mysql5.5解压版安装教程
  • 如何制作ubuntu系统盘
  • git checkout撤销
  • 在unix操作系统中,账户的功能有哪些
  • win8系统忘记电脑开机密码怎么办
  • 新手菜鸟什么意思
  • linux系统批量任务
  • mac文件怎么用
  • linux用户添加
  • 安卓开源部分叫什么
  • python基本用法
  • unity做3d游戏
  • Node.js中的全局变量有哪些
  • excite引擎
  • 批处理copy合并文件
  • 深入解析java编译器:源码剖析与实例详解
  • js日期操作
  • jquery图片自动滚动
  • linux echo echo
  • 动态创建类对象
  • js获取设备
  • jquery1
  • 增值税进项税额抵扣凭证
  • 133平房子公摊36.88
  • 百旺金赋天津客服
  • 怎么查了?
  • 境外个人税务备案登记表
  • 水费不用交吗
  • 企业所得税账务如何处理
  • 个人所得税的工资比实际的多
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设