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

  • 计提个税与实际缴纳不一致
  • 残疾人保障金为什么是小数
  • 小规模代开增值税专用发票怎么操作?
  • 社保是当月计提当月的吗
  • 分公司的所得税怎么申报
  • 专用发票上的码头堆存费等进项税可否抵扣?
  • 股权增值转让的财税处理
  • 增值税专用发票电子版
  • 房租本月入账上月的怎么摊销?
  • 去年税收滞纳金计入什么科目
  • 季度企业所得税申报表怎么填写
  • 建安发票是什么意思
  • 发票记账联丢失怎么写情况说明
  • 设备租赁涉及税种
  • 小微企业所得税税率多少
  • 第三方代收代付平台
  • 以前年度补交的税款进什么科目?
  • 购买汽车可以开普通发票吗
  • 无法支付的款项转销
  • 如何正确安装和使用电脑
  • 该内存不能为read是怎么回事
  • 未开票收入申报后又要开票
  • php 递归函数
  • 押金少退侵犯了哪条法律
  • win10重置后能恢复吗
  • 销售货物支付运杂费要交增值税吗
  • 什么是摊余成本计量的金融资产
  • win10右键失灵解决办法
  • php中md5函数
  • php运行无法访问此页面
  • 企业的留存收益可以抵税吗
  • pdo_mysql
  • vue项目部署到服务器上,页面空白
  • 非盈利组织固定资产没入帐 怎么调账
  • 一个楼盘可以开盘几次
  • java web中的转发和重定向
  • atq命令 显示用户待执行任务列表
  • 应收账款结账损失怎么算
  • 垃圾费放在哪个会计科目
  • 企业利润分配的账务处理
  • 分公司申请独立账户流程
  • 怎样申请土地增值税补贴
  • 银行收到企业存款会计分录
  • 公司给员工的福利语句
  • 虚开普票的立案标准
  • 进口关税如何交
  • 专利年费的滞纳金怎么做账
  • 怎样计提税金及附加
  • 税金及附加需不需要计提
  • 哪些合同不需要缴纳印花税的通知
  • 支付水电费会计
  • 递延所得税当前试用25%,以后15%
  • 转入企业银行存款利息分录
  • 企业所得税季报营业成本包括哪些
  • 库存商品账务没做如何调增
  • 车辆转让怎么开票
  • 什么是交易性金融资产?交易性金融资产主要有哪些特点?
  • 项目期间费用包括哪些费用
  • 在sqlserver数据库中,执行sql语句
  • mysql解压版安装教程5.7.20
  • win8.1鼠标没反应
  • jucheck.exe
  • 系统磁盘碎片整理
  • 照相机文件名
  • Node.js中的事件循环是什么意思
  • python抓取软件界面数据
  • fastcgi iis
  • sockaddr_in和sockaddr
  • nodejs vue
  • 置顶怎么折叠起来
  • 类库怎么用
  • js写日期
  • android的事件处理机制
  • 国家税务电子发票查验入口
  • 甘肃国税电子税务局
  • 出口退税是哪个环节交的
  • 安置房公摊面积多少属于正常范围
  • 税务总局2019 14号
  • 税务登录 河北省地方税务局
  • 蜂窝煤利润怎么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设