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

  • 支付宝提升芝麻分的方法有哪些(支付宝怎么快速提升芝麻粒)

    支付宝提升芝麻分的方法有哪些(支付宝怎么快速提升芝麻粒)

  • 电脑键盘鼠标显示器都不亮怎么办(电脑键盘鼠标显示器都没反应了怎么操作电脑)

    电脑键盘鼠标显示器都不亮怎么办(电脑键盘鼠标显示器都没反应了怎么操作电脑)

  • 华为怎么截屏长图(华为怎么截屏长图模式)

    华为怎么截屏长图(华为怎么截屏长图模式)

  • 华为语音唤醒词怎么改(华为语音唤醒词怎么改不了)

    华为语音唤醒词怎么改(华为语音唤醒词怎么改不了)

  • 中断响应的条件(51单片机中断响应的条件)

    中断响应的条件(51单片机中断响应的条件)

  • qq亲密关系必须开情侣空间吗(qq亲密关系必须同意吗)

    qq亲密关系必须开情侣空间吗(qq亲密关系必须同意吗)

  • 联通宽带已连接不可上网(联通宽带已连接但无法访问互联网)

    联通宽带已连接不可上网(联通宽带已连接但无法访问互联网)

  • snmsung什么牌子的手机(snmsung什么牌子的手机多少钱)

    snmsung什么牌子的手机(snmsung什么牌子的手机多少钱)

  • 目前网络传输介质中传输速率最高的是(目前网络传输介质中传输速度率最高的是)

    目前网络传输介质中传输速率最高的是(目前网络传输介质中传输速度率最高的是)

  • ch/a是什么版本(mggu3ch/a是什么版本)

    ch/a是什么版本(mggu3ch/a是什么版本)

  • 苹果手机升级系统白屏怎么办(苹果手机升级系统后怎么恢复旧系统)

    苹果手机升级系统白屏怎么办(苹果手机升级系统后怎么恢复旧系统)

  • 英特尔显卡驱动程序可以卸载吗(英特尔显卡驱动下载官网)

    英特尔显卡驱动程序可以卸载吗(英特尔显卡驱动下载官网)

  • 农村信号不好如何解决(农村信号不好如何解决怎么投诉)

    农村信号不好如何解决(农村信号不好如何解决怎么投诉)

  • 简单的邮件传输协议缩写(简单的邮件传输软件)

    简单的邮件传输协议缩写(简单的邮件传输软件)

  • qqwifi在线就一定在吗(qqwifi在线是不是在玩手机)

    qqwifi在线就一定在吗(qqwifi在线是不是在玩手机)

  • 抖音和快手有什么区别(抖音和快手有什么区别,普通人该如何选择)

    抖音和快手有什么区别(抖音和快手有什么区别,普通人该如何选择)

  • 苹果lla是什么版本有锁吗(lla是什么版本的苹果手机)

    苹果lla是什么版本有锁吗(lla是什么版本的苹果手机)

  • 华为share怎么用(华为share怎么用怎么分享给电脑)

    华为share怎么用(华为share怎么用怎么分享给电脑)

  • 抖音里共同关系人是什么意思(抖音共同关注和共同联系人有什么区别)

    抖音里共同关系人是什么意思(抖音共同关注和共同联系人有什么区别)

  • wifi网速一会快一会慢(wifi一会快一会慢怎么回事)

    wifi网速一会快一会慢(wifi一会快一会慢怎么回事)

  • 抖音橱窗必须开通淘宝联盟吗(抖音橱窗必须开通聚合账户有个扣款吗)

    抖音橱窗必须开通淘宝联盟吗(抖音橱窗必须开通聚合账户有个扣款吗)

  • 华为p30电筒在哪(华为p30手机电筒在哪里)

    华为p30电筒在哪(华为p30手机电筒在哪里)

  • 锁屏快资讯怎么删除(锁屏资讯怎么打开)

    锁屏快资讯怎么删除(锁屏资讯怎么打开)

  • 怎么把QQ相册制作成视频(qq的相册如何做文件夹)

    怎么把QQ相册制作成视频(qq的相册如何做文件夹)

  • 电脑主板BIOS设置详解BIOS知识点汇总(电脑主板bios设置)

    电脑主板BIOS设置详解BIOS知识点汇总(电脑主板bios设置)

  • 机器学习篇-指标:AUC

    机器学习篇-指标:AUC

  • warnquota命令  发送邮件给超出配额的用户(命令start)

    warnquota命令 发送邮件给超出配额的用户(命令start)

  • 车辆购置税征收管理
  • 销售不动产营业税纳税义务发生时间
  • 金税四期上线后对企业的影响
  • 出口报关单运费小于实际运费
  • 营业外支出影响利润
  • 企业缴纳的社保可以税前扣除吗
  • 货到票未到怎么入账
  • 销售原材料的账务处理
  • 不付供应商尾款了怎么清账
  • 公司年会增值税专用发票可以抵扣吗?
  • 技术转让怎么算成本
  • 12月份奖金怎么扣个税
  • 外贸企业出口退税申报流程操作
  • 公司发生的费用需要交税吗
  • 交通定额发票税率
  • 增值税普通发票需要交税吗
  • 外经证作废流程
  • 免税和零税率和税率区别
  • 收到工伤保险的发票
  • 在建工程预估转入固定资产怎么做凭证
  • 修改远程桌面端
  • 软件无法运行解决方法
  • 金银镶嵌首饰在哪个环节交消费税
  • 建筑公司能否开材料票
  • 笔记本怎么开wifi
  • 公司注销账上有固定资产转给股东还要交税吗
  • 销售使用过的固定资产怎么填申报表
  • php保存数据
  • php foreach二维数组
  • php怎么输出中文
  • laravel artisan命令
  • php实现base64图片上传方式实例代码
  • python 微信红包
  • 2022最好用的港澳台电视直播
  • 接手前往年的银行余额不平怎么办?
  • 增值税小规模纳税人减免增值税政策
  • mysqli删除
  • 减免税款借贷方表示
  • 个税手续费返还计入哪个科目
  • 企业内部交易如何操作
  • 报关单未申报做账怎么办
  • 原材料属于固定资本还是流动资本
  • 企业取得的跨期业务
  • 公司债权转让如何交税
  • 贷款的拨备覆盖率
  • 老板出差带礼物给员工的说说
  • 申报系统中印花税报表怎么填
  • 单位组织活动主持词
  • 贷款应提准备的资料包括
  • 固定资产原值如何计算
  • 内部无形资产交什么税
  • mysql 从库
  • sqlserver2005iis警告
  • Win10 Mobile 10563预览版微软官方模拟器下载
  • 微软被告
  • centos release6.7
  • ipssvc.exe - ipssvc是什么进程 有什么作用
  • linux图形界面与命令行
  • win7开始菜单没有搜索框
  • 如何解决android代码红线
  • cocos2djs
  • apk反编译是什么意思
  • cocos creator构建发布
  • cocos2dx游戏开发教程
  • nodejs获取当前路径
  • unity3d功能介绍
  • unity3d跨平台
  • js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
  • python操作word文档替换文字
  • js如何使用
  • python中input的用法
  • 文化事业建设费是什么税
  • 医保所属期起和所属期止
  • 江西省税务电子官网
  • 如何查询契税是否逾期
  • 东莞为什么这么多人
  • 网上查询公司营业执照
  • 山西增值税优惠政策
  • 深圳为何
  • 我国近十年财政支出结构占比
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设