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

  • 哪些情况下可以无偿提供法律援助
  • 出口退税逾期申报说明怎样写
  • 增值税怎么记
  • 合同资产和合同负债属于什么科目
  • 上级补助收入对应的支出科目是哪个
  • 公司向法人还回借款现金的分录
  • 未交增值税最后到哪去了
  • 结转净利润到利润分配分录
  • 小规模人力资源外包税率
  • 设计原始凭证所需内容及步骤
  • 子公司向母公司借款对合并报表的影响
  • 公司办公室租赁费会计分录
  • 弱电系统安装的注意要点
  • 营改增后甲供材税前扣除还是税后扣除?
  • 存货扣税比是什么意思?
  • 金税盘不交年费可以正常使用吗
  • 员工生日福利申请
  • 公司租车交税
  • 企业买的商业保险退款怎么做账
  • 如何设置电脑任务栏显示
  • 留存收益在哪里可以查到
  • 如何修改win10系统电脑密码
  • php用户登录用的什么技术
  • 代垫费用的进项税怎么算
  • imac夜间模式
  • 电脑打字不显示文字选项
  • 高新企业研发费用会计分录
  • 票据贴现办法
  • 购入工程物资用于建设厂房,购入后直接领用至工程项目
  • .sfx.exe是什么文件
  • 运输发票的抵扣税率
  • 详解php字符串替换
  • php基于正则批量输出
  • nginx配置tp5
  • 丑八怪 英文
  • php cookie session
  • 销售产品的包装费
  • 发票收款人与复核人为空
  • 来料加工企业的划分标准
  • 固定资产处置金额是什么意思
  • 利润表年报本期金额填什么
  • dedecms手册
  • mongodbwin7能安装么
  • 资产捐赠账务处理
  • 公司收到保险公司退保费怎么账务处理
  • 财务报表申报后怎么修改
  • 劳务外包人员算从业人员期末人数么
  • 非营利组织也被称为?
  • 现金及现金等价物包括哪些科目
  • 会计法中单位负责人均指法定代表人
  • 合作社增值税免税项目
  • 车间报销维修费会计科目
  • 暂估入账的固定资产
  • 差旅费住宿专票可以抵扣增值税吗
  • 公司销售给客户的感谢信
  • 带赠品折扣的发票怎么开
  • 不动产租赁属于什么税目
  • 单位社保缴费基数比例
  • 小规模纳税人租赁费税率
  • 联营企业和子公司哪个好
  • 临时工工资怎么入账合法吗
  • 发票作废有什么后果
  • 关于sql的几道小知识
  • win10无人值守文件使用方法
  • windows蓝屏代码大全及解决方案
  • win7 显示日期
  • 微软官方屏蔽更新工具
  • Win8出现奇怪爆音的完美解决方法
  • WIN7系统的电脑怎么运行快
  • 横版格斗rpg手游
  • js实现拖拽元素改编顺序
  • jquery左右选择框
  • python数据结构与算法题库
  • jquery遍历元素并赋值
  • go语言websocket
  • shell 捕获输出结果
  • [置顶] 安卓手机连接IP100蓝牙打印机实现打印功能
  • 打印个人住房信息查询记录需要什么资料
  • 国地税改革意义
  • 目前长沙二手房出售信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设