位置: 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)(石楠花 开花)

  • QQ营销之网站的推广方法(qq营销的作用)

    QQ营销之网站的推广方法(qq营销的作用)

  • 微信视频怎么转发到QQ(微信视频怎么转发到抖音里面)

    微信视频怎么转发到QQ(微信视频怎么转发到抖音里面)

  • vivoy93屏幕多大尺寸(vivoy93屏幕尺寸)

    vivoy93屏幕多大尺寸(vivoy93屏幕尺寸)

  • 荣耀play4pro支持红外遥控功能吗(荣耀play4pro支持内存卡扩展吗)

    荣耀play4pro支持红外遥控功能吗(荣耀play4pro支持内存卡扩展吗)

  • qq看点视频播放不了(qq看点视频播放在哪里)

    qq看点视频播放不了(qq看点视频播放在哪里)

  • 预埋网线如何更换(更换预埋网线专业团队)

    预埋网线如何更换(更换预埋网线专业团队)

  • 联想m7206w粉盒清零方法(联想m7268粉盒清零)

    联想m7206w粉盒清零方法(联想m7268粉盒清零)

  • 支付宝nfc功能怎么打开(支付宝nfc功能怎么没了)

    支付宝nfc功能怎么打开(支付宝nfc功能怎么没了)

  • 谷歌框架有什么害处?(谷歌服务框架)

    谷歌框架有什么害处?(谷歌服务框架)

  • poe摄像头可以12v供电吗(poe摄像头可以单独供电吗)

    poe摄像头可以12v供电吗(poe摄像头可以单独供电吗)

  • 红米k30pro下巴多少毫米(红米k30 pro下巴几毫米)

    红米k30pro下巴多少毫米(红米k30 pro下巴几毫米)

  • 手环充电没显示是什么原因(手环充电不显示了是怎么回事)

    手环充电没显示是什么原因(手环充电不显示了是怎么回事)

  • 小度在家air和1s区别(小度在家air和1c哪个更值得入手呢)

    小度在家air和1s区别(小度在家air和1c哪个更值得入手呢)

  • ps格式是什么(ps格式是什么后缀)

    ps格式是什么(ps格式是什么后缀)

  • 手机怎么识别歌曲(手机怎么识别歌名和图片)

    手机怎么识别歌曲(手机怎么识别歌名和图片)

  • 淘宝达人头像怎么换(淘宝达人在哪儿打开)

    淘宝达人头像怎么换(淘宝达人在哪儿打开)

  • wps装订线怎么设置(wps2019装订线怎么设置)

    wps装订线怎么设置(wps2019装订线怎么设置)

  • 云盘是储存在什么地方(储存在云盘的文件安全吗)

    云盘是储存在什么地方(储存在云盘的文件安全吗)

  • 苹果手机微信延迟的解决方法(苹果手机微信延迟多长时间)

    苹果手机微信延迟的解决方法(苹果手机微信延迟多长时间)

  • 苹果手机出现蓝色方框如何取消(苹果手机出现蓝色移动框框咋办)

    苹果手机出现蓝色方框如何取消(苹果手机出现蓝色移动框框咋办)

  • 苹果xs max什么处理器(苹果xs maxzol)

    苹果xs max什么处理器(苹果xs maxzol)

  • 苹果热点怎么看谁连接(苹果热点怎么看连接的设备)

    苹果热点怎么看谁连接(苹果热点怎么看连接的设备)

  • 电脑空闲时占用大量系统资源(电脑很空但是占用率90)

    电脑空闲时占用大量系统资源(电脑很空但是占用率90)

  • rtmservice.exe - rtmservice是什么进程 有什么用

    rtmservice.exe - rtmservice是什么进程 有什么用

  • 分享项目 - Vue3 + TS + element-ui-plus 项目 -- Table表格表单(分享项目成果)

    分享项目 - Vue3 + TS + element-ui-plus 项目 -- Table表格表单(分享项目成果)

  • Tesla都使用什么编程语言?(特斯拉适用于什么车型)

    Tesla都使用什么编程语言?(特斯拉适用于什么车型)

  • phpcms怎么判断用户是否登录(php判断ua)

    phpcms怎么判断用户是否登录(php判断ua)

  • 税控盘服务费全额抵扣分录
  • 进口增值税的税率
  • 营业税金及附加怎么计提
  • 财产租赁合同印花税计税依据含税吗
  • 普通发票附注一般填什么
  • 进项税额转出影响城建税吗
  • 合并两公司的帐务怎么做
  • 替票怎么控制数量
  • 房屋租赁收入还需要缴纳附加税吗
  • 盈余公积转增股本的分录怎么写
  • 生产企业出口货物会计分录
  • 总分机构如何纳税
  • 怎么确定印花税申报成功
  • 小规模纳税人销售不动产适用税率
  • 多扣社保个人部分怎么做分录
  • 专票打印的时候密码区压线了能用吗
  • 印花税是发票吗
  • 百旺红字发票申领流程
  • 企业2015年申报抵扣的增值税,2016年检查有11000元不得抵扣,需要补交增值税11000元并收滞纳金及罚款1200元,请问老师具体该怎么做账,谢谢
  • 工会经费的缴费主体
  • 土地计入无形资产包括的税费
  • 销售房地产要交培训费是传销行为吗
  • 个人所得税的速算扣除数是什么意思
  • 外籍人士离职补偿
  • 销售商品收到货款20000元存入银行
  • 非房地产企业的基建管理办法
  • 汇算清缴后的会计分录
  • 存货成本要加上税费吗
  • php数组根据值排序
  • win10最新版本激活
  • 公司入股的钱怎么做账
  • 如何直接访问ip地址
  • 出差补贴如何入账报销
  • 当月计算的增值税怎么算
  • 前端 上传文件
  • php数组函数题目
  • 金融企业计提贷款利率
  • 甲产品生产耗用a材料10000千克,单位成本
  • 浅谈PHP发送HTTP请求的几种方式
  • 企业清算分配的财产金额怎么算出来
  • 杜布罗夫尼克老城去机场
  • 青龙面板库怎么用
  • 微信小程序项目中app.js文件是全局样式文件
  • 基于车联网
  • 网络用语屠夫
  • 用more命令查看文件内容
  • 可行性研究合同印花税
  • 跨年的增值税专票怎么开
  • 商品出入库台账
  • 小企业短期借款科目的贷方登记
  • 销售折让怎么核算成本
  • sql server 使用
  • 公司开业装修费会计分录
  • 员工购买口罩会计科目
  • 红冲发票重开一定要一样的金额吗?
  • 待摊费用科目分录
  • 实际上缴税费总额怎么算
  • 农村的扶贫政策是什么
  • 明细分类账怎么打印
  • win7系统权限设置
  • 如何查看电脑型号及配置
  • xp的兼容模式
  • 升级怎么玩
  • windows关机音乐
  • unity脚本模板
  • 11月编程语言排行榜出炉
  • cocos2d怎么用
  • ReactNative之FlatList的具体使用方法
  • javascript运用
  • angular页面加载完后执行方法
  • nodejs图片上传
  • javascript语言入门教程
  • jquery ztree实现模糊搜索功能
  • 高性能javascript的内容简介
  • javascript编程语言
  • 税务软件服务商
  • 低保大数据核查哪些数据
  • 车辆购置税属于税金及附加吗
  • 留底税额怎么写分录
  • 2021年福建医保什么时候交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设