vue-element-admin动态菜单（后台获取）

news2025/7/15 6:32:43

vue-element-admin动态菜单（后台获取），此教程面向纯小白攻略，不要嫌我啰嗦，翻到自己需要的地方即可

前提

vue-element-admin官网： vue-element-admin (gitee.io)

vue-element-admin页面展示：vue-element-adminVue Element Admin

vue-element-admin下载：PanJiaChen/vue-element-admin

安装依赖报错解决方案：vue-element-admin项目安装依赖报错

首先我们拿到项目，得了解一下目录结构

他是通过src->router->index.js，根据路由来进行页面的跳转

在这里插入图片描述

我们查看一下里面的文件，再对比一下项目的目录

export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    alwaysShow: true, // will always show the root menu
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          title: 'Page Permission',
          roles: ['admin'] // or you can only set roles in sub nav
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: {
          title: 'Directive Permission'
          // if do not set roles, means: this page does not require permission
        }
      },
      {
        path: 'role',
        component: () => import('@/views/permission/role'),
        name: 'RolePermission',
        meta: {
          title: 'Role Permission',
          roles: ['admin']
        }
      }
    ]
  },

  {
    path: '/icon',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/icons/index'),
        name: 'Icons',
        meta: { title: 'Icons', icon: 'icon', noCache: true }
      }
    ]
  },

  /** when your routing map is too long, you can split it into small modules **/
  componentsRouter,
  chartsRouter,
  nestedRouter,
  tableRouter,

  {
    path: '/example',
    component: Layout,
    redirect: '/example/list',
    name: 'Example',
    meta: {
      title: 'Example',
      icon: 'el-icon-s-help'
    },
    children: [
      {
        path: 'create',
        component: () => import('@/views/example/create'),
        name: 'CreateArticle',
        meta: { title: 'Create Article', icon: 'edit' }
      },
      {
        path: 'edit/:id(\\d+)',
        component: () => import('@/views/example/edit'),
        name: 'EditArticle',
        meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
        hidden: true
      },
      {
        path: 'list',
        component: () => import('@/views/example/list'),
        name: 'ArticleList',
        meta: { title: 'Article List', icon: 'list' }
      }
    ]
  },

  {
    path: '/tab',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/tab/index'),
        name: 'Tab',
        meta: { title: 'Tab', icon: 'tab' }
      }
    ]
  },

  {
    path: '/error',
    component: Layout,
    redirect: 'noRedirect',
    name: 'ErrorPages',
    meta: {
      title: 'Error Pages',
      icon: '404'
    },
    children: [
      {
        path: '401',
        component: () => import('@/views/error-page/401'),
        name: 'Page401',
        meta: { title: '401', noCache: true }
      },
      {
        path: '404',
        component: () => import('@/views/error-page/404'),
        name: 'Page404',
        meta: { title: '404', noCache: true }
      }
    ]
  },

  {
    path: '/error-log',
    component: Layout,
    children: [
      {
        path: 'log',
        component: () => import('@/views/error-log/index'),
        name: 'ErrorLog',
        meta: { title: 'Error Log', icon: 'bug' }
      }
    ]
  },

  {
    path: '/excel',
    component: Layout,
    redirect: '/excel/export-excel',
    name: 'Excel',
    meta: {
      title: 'Excel',
      icon: 'excel'
    },
    children: [
      {
        path: 'export-excel',
        component: () => import('@/views/excel/export-excel'),
        name: 'ExportExcel',
        meta: { title: 'Export Excel' }
      },
      {
        path: 'export-selected-excel',
        component: () => import('@/views/excel/select-excel'),
        name: 'SelectExcel',
        meta: { title: 'Export Selected' }
      },
      {
        path: 'export-merge-header',
        component: () => import('@/views/excel/merge-header'),
        name: 'MergeHeader',
        meta: { title: 'Merge Header' }
      },
      {
        path: 'upload-excel',
        component: () => import('@/views/excel/upload-excel'),
        name: 'UploadExcel',
        meta: { title: 'Upload Excel' }
      }
    ]
  },

  {
    path: '/zip',
    component: Layout,
    redirect: '/zip/download',
    alwaysShow: true,
    name: 'Zip',
    meta: { title: 'Zip', icon: 'zip' },
    children: [
      {
        path: 'download',
        component: () => import('@/views/zip/index'),
        name: 'ExportZip',
        meta: { title: 'Export Zip' }
      }
    ]
  },

  {
    path: '/pdf',
    component: Layout,
    redirect: '/pdf/index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/pdf/index'),
        name: 'PDF',
        meta: { title: 'PDF', icon: 'pdf' }
      }
    ]
  },
  {
    path: '/pdf/download',
    component: () => import('@/views/pdf/download'),
    hidden: true
  },

  {
    path: '/theme',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/theme/index'),
        name: 'Theme',
        meta: { title: 'Theme', icon: 'theme' }
      }
    ]
  },

  {
    path: '/clipboard',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/clipboard/index'),
        name: 'ClipboardDemo',
        meta: { title: 'Clipboard', icon: 'clipboard' }
      }
    ]
  },

  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://github.com/PanJiaChen/vue-element-admin',
        meta: { title: 'External Link', icon: 'link' }
      }
    ]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

我拿一部分来跟目录做一下对比，下面我将参数讲解一下

在这里插入图片描述

各个参数的意思

有子目录的目录，以最常见的table举例，table在这里，ctrl+左键点进去就行

在这里插入图片描述

如果使用的 vscode 跳转不了，他的目录是 src\router\modules\table.js

参数与目录的对照

在这里插入图片描述

动态菜单思路

我们要做到的是，根据后端返回的json对象，动态的显示目录

而vue-element-admin，是写死了的菜单，所以我们调用后端接口，实现目录的拼接，最终达到实现动态菜单的目的

那么我们就要仿造router目录下index.js文件，动态的生成相似的json对象

生成动态菜单，修改文件

修改src/store/modules目录下的permission.js文件，这个文件就是用来生成菜单的（上面的index.js只是目录的结构，并不是生成的途径）

源文件

//这个asyncRoutes不眼熟吗，不就是刚才我们看的目录结构吗
import { asyncRoutes, constantRoutes } from '@/router'

//不管
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

//不管
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}
//不管
const state = {
  routes: [],
  addRoutes: []
}
//不管
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}
//重要的是这个，这里不用看，但你要知道这里很重要，是加载目录的地方
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}
//不管
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

我修改的permission.js文件，下面有json文件，一定要对照着看，不然看不懂

import { asyncRoutes, constantRoutes } from '@/router'

import { authMenu } from '@/api/user'// 【新加入】引入请求，后面有文件，先不慌
import Layout from '@/layout'// 【新加入】引入layout

// 这里是因为我之前没用动态菜单的时候报错，从网上搜的，改了点，好像也不太重要
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    if (route.meta.roles.indexOf(roles) > -1) {
      return true
    } else {
      return false
    }
    // return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

//这里自己写方法，作用就是向 asyncRoutes 插入路由，达到动态路由的效果
/**
 * 【新加入】后台查询的菜单数据拼装成路由格式的数据
 * @param routes
 */
export function generaMenu(routes, data) {
    //data挨个遍历
  data.forEach(item => {
      //path不为空的话，就新建一个对象，装数据
    if (item.path !== '') {
        //这个就仿照目录的机构，搭建
      const menu = {
        path: item.path,
        component: Layout, //这个不用写data里面的内容，引用就行了
        redirect: item.redirect,
        children: [],
        name: item.name,
        meta: item.meta
      }
      //遍历子标签，并加入到主目录的children中去
      item.children.forEach(item => {
        const menu2 = {
          path: item.path,
          component: (resolve) => require([`@/views${item.component}`], resolve),
          name: item.name,
          meta: item.meta
        }
        //加入到主目录的children中去
        menu.children.push(menu2)
      })
  	  //追加
      routes.push(menu)
    }
  })
//把404加到最后，因为作者说  // 404 page must be placed at the end !!!
  const menu3 = {
    path: '*',
    redirect: '/404',
    hidden: true
  }
  //追加
  routes.push(menu3)
}

//不看
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}
//不看
const state = {
  routes: [],
  addRoutes: []
}
//不看
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      // 【新加入】开始
      const loadMenuData = []
      // 先查询后台并返回左侧菜单数据并把数据添加到路由，authMenu（state.token）后面会写
      authMenu(state.token).then(response => {
        let data = response
        //我的code为100200为正常
        if (response.code !== 100200) {
          this.$message({
            message: '菜单数据加载异常',
            type: 0
          })
        } else {
            //获取目录的json
          data = response.data
            //把data的数据拷贝到loadMenuData里面
          Object.assign(loadMenuData, data)
            //把asyncRoutes的数据拷贝到tempAsyncRoutes里面
          const tempAsyncRoutes = Object.assign([], asyncRoutes)
          // 最最重要的，把loadMenuData追加到tempAsyncRoutes后面
          generaMenu(tempAsyncRoutes, loadMenuData)
            //定义accessedRoutes
          let accessedRoutes
          // 把 tempAsyncRoutes 的值给 accessedRoutes ，并输出
          // eslint-disable-next-line prefer-const
          accessedRoutes = tempAsyncRoutes || []
            //下面这些就是加载目录了
          commit('SET_ROUTES', accessedRoutes)
          resolve(accessedRoutes)
        }
      })
    }).catch(error => {
      console.log(error)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

JSON文件，后台返回的值

{
    "code":100200,
    "msg":"返回成功",
    "data":[
        {
            "path":"/maintenance",
            "component":"Layout",
            "redirect":"",
            "name":"",
            "meta":{
                "title":"",
                "icon":"table"
            },
            "children":[
                {
                    "path":"/maintenance-task-management",
                    "component":"/table/complex-table",
                    "name":"maintenance-task-management"
                    "meta":{
                        "title":"维修任务管理"
                    }
                }
            ]
        },
        {
            "path":"/complete",
            "component":"Layout",
            "redirect":"",
            "name":"",
            "meta":{
                "title":"",
                "icon":"table"
            },
            "children":[
                {
                    "path":"/complete-maintenance-management",
                    "component":"/table/complex-table",
                    "name":"complete-maintenance-management"
                    "meta":{
                        "title":"维修完成管理"
                    }
                }
            ]
        },
        {
            "path":"/plant",
            "component":"Layout",
            "redirect":"",
            "name":"",
            "meta":{
                "title":"",
                "icon":"table"
            },
            "children":[
                {
                    "path":"/plant-maintenance-management",
                    "component":"/table/complex-table",
                    "name":"plant-maintenance-management"
                    "meta":{
                        "title":"送厂维修管理"
                    }
                }
            ]
        },
        {
            "path":"/device",
            "component":"Layout",
            "redirect":"",
            "name":"",
            "meta":{
                "title":"",
                "icon":"table",
            },
            "children":[
                {
                    "path":"/device-information-search",
                    "component":"/table/complex-table",
                    "name":"device-information-search"
                    "meta":{
                        "title":"设备信息查找"
                    }
                }
            ]
        }
    ]
}

添加authMenu接口

引入后台接口的方法(也就是封装好的axios，然后把接口统一写在一个js文件里，用的时候直接引入，方便后期维护)

首先在src->api>user.js，加入一个接口方法

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/fix/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/fix/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/fix/user/logout',
    method: 'post'
  })
}
//这里加一个，根据data的不同，后台会返回不同的字符串结果，动态菜单完成
export function authMenu(data) {
  return request({
    url: '/fix/user/selectMenu',
    method: 'post',
    data
  })
}

修改index.js中的asyncRoutes方法，使其为空，要我们动态的加入菜单

export const asyncRoutes = [
]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/8495.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring Boot框架下实现Excel服务端导入导出

Spring Boot框架下实现Excel服务端导入导出

Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。今天我们就使用纯前对按表格控件带大家了解，如何在Spring…
阅读更多...
高精度算法【加减乘除】

高精度算法【加减乘除】

全文目录😍 前言😀 高精度加法🤔 操作步骤😵‍💫 代码模板😀高精度减法🤔操作步骤😵‍💫 代码模板😀高精度乘法🤔操作步骤😵‍&#x…
阅读更多...
[R]第二节 对象介绍与赋值运算

[R]第二节 对象介绍与赋值运算

前言 R 创建、控制的实体(entity)称为对象(object)。向量(vector)矩阵(matrix)数组(array)数据框(data frame)列表(list)因子(factor)函数(function)通过以上实体定义的更为一般性的结构(structures) 数据的存储形式 R语言进行数据存储选择一种合适的数据结构将已有的数据输入…
阅读更多...
【Python实战】海量表情包炫酷来袭，快来pick斗图新姿势吧~(超好玩儿)

【Python实战】海量表情包炫酷来袭，快来pick斗图新姿势吧~(超好玩儿)

前言 有温度 有深度 有广度 就等你来关注哦~ 所有文章完整的素材源码都在👇👇 粉丝白嫖源码福利，请移步至CSDN社区或文末公众hao即可免费。 你有在聊天中遇到不知道该如何表达，如何回复的情况吗？ 或许，使…
阅读更多...
FastDFS学习（四）

FastDFS学习（四）

目录： （1）FastDFS搭建集群的环境准备 （2）FastDFS集群搭建负载均衡环境-使用Nginx进行负载均衡 （1）FastDFS搭建集群的环境准备 架构图 如果你公司刚好用这个，那你就会搭建集群涉及…
阅读更多...
python基于PHP+MySQL的个人博客系统毕设

python基于PHP+MySQL的个人博客系统毕设

随着时代和网络的发展,人们越来越希望通过多种模式来展示自己。于是个人博客就出现了,它可以更好的让人们来记录自己的工作和学习方式。博客不仅仅可以让自己抒发个人感情,还可以展示自己真实的生活,从而建立起一种友好的交友平台。 PHP个人博客系统毕设系统分为前台和后台两部…
阅读更多...
第2-3-3章 文件处理策略-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss

第2-3-3章 文件处理策略-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss

文章目录5.2 文件处理策略5.2.1 FileStrategy5.2.2 AbstractFileStrategy5.2.3 LocalServiceImpl5.2.4 FastDfsServiceImpl5.2.5 AliServiceImpl5.2.6 MinioServiceImpl5.2 文件处理策略 在开发fastDFS和minio实现类之前，需要提前安装部署好fastDFS和minio。搭建教程…
阅读更多...
LIS.LCS.LCIS相关问题

LIS.LCS.LCIS相关问题

文章目录P1020 [NOIP1999 普及组] 导弹拦截P1439 【模板】最长公共子序列P1637 三元上升子序列272. 最长公共上升子序列LCISP1020 [NOIP1999 普及组] 导弹拦截 P1020 [NOIP1999 普及组] 导弹拦截 导弹拦截应该是接触DP的第一题（只不过洛谷上的数据加强了&#xff…
阅读更多...
Windows平台 使用jarsigner对Apk签名

Windows平台 使用jarsigner对Apk签名

使用的是JDK自带的jarsigner工具来完成Apk签名 1) 首先找到你的Java Jdk中bin的路径：C:\Program Files\Java\jdk1.8.0_152\bin jarsigner简单使用说明 #jarsigner的命令格式： jarsigner -verbose -keystore [您的私钥存放路径] -signedjar [签名后文件存…
阅读更多...
使用高数值孔径透镜进行脉冲聚焦

使用高数值孔径透镜进行脉冲聚焦

摘要 尽管对于大多数其他类型的光源而言，静态近似下是足够精确的，但对于超短脉冲来说需要更加精确的方法，其中要考虑到不同光谱模式之间的相关性。在此，我们在空间、时间与场分布上研究了该脉冲传播通过高数值孔径透镜的影响。 建…
阅读更多...
基于matlab和Simulink的不同阶QAM调制解调系统误码率对比仿真

基于matlab和Simulink的不同阶QAM调制解调系统误码率对比仿真

目录 1.算法概述 2.仿真效果预览 3.核心MATLAB预览 4.完整MATLAB程序 1.算法概述 正交振幅调制是利用已调信号在相同带宽内的频谱正交来实现两路并行的数据信息传输，其信道频带利用率与单边带调制一样，主要用于高速数据传输系统中。QAM系统组成框图如…
阅读更多...
Vue3 - 事件 API 新标准（如何在 Vue3 中怎么用事件总线实现兄弟组件通信？相比 Vue2 有什么不同？）

Vue3 - 事件 API 新标准（如何在 Vue3 中怎么用事件总线实现兄弟组件通信？相比 Vue2 有什么不同？）

前言 对比 Vue2 ，引出并展开 Vue3 。 本文讲述了事件 API 在 Vue3 中相比 Vue2 有什么变化，以及使用方法和代码示例详细讲解。 回忆 Vue2 大家在写 Vue2 项目时，兄弟组件之间传参，我相信很大一部分开发者都会借助全局的事件总线&…
阅读更多...
Kubernetes 系统化学习之 POD原理篇（二）

Kubernetes 系统化学习之 POD原理篇（二）

1. Kubernets 概览回顾 Pod、Service、Volume 和 Namespace 是 Kubernetes 集群中四大基本对象，它们能够表示系统中部署的应用、工作负载、网络和磁盘资源，共同定义了集群的状态。Kubernetes 中很多其他的资源其实只对这些基本的对象进行了组合。 Pod -…
阅读更多...
最全JAVA系列视频教程源码

最全JAVA系列视频教程源码

扫描关注公众号：发送对应消息获取源码（下面红色字为发送消息内容,取掉空格哦） JAVA 基础： java基础 更适合零基础学员： 自Java语言起源始，循序渐进，知识点剖析细致且每章配备大量随堂练…
阅读更多...
Android实现动态换肤-原理篇

Android实现动态换肤-原理篇

学习是一个过程。 文章目录Activity中LayoutInflater加载布局总体时序图LayoutInflater源码讲解（api28）LayoutInflater设置Factory2实现方式LayoutInflater源码总结Activity中LayoutInflater加载布局总体时序图 LayoutInflater源码讲解（api28…
阅读更多...
高级UI——Paint(滤镜,颜色通道,矩阵运算)

高级UI——Paint(滤镜,颜色通道,矩阵运算)

前言 我们已经详细了解到整个android程序，从启动再到绘制的整体流程，从这中间我们又牵扯出了Canvas绘制图形的画板和我们的Paint控制色彩样式的画笔，那么之前基础篇我们就不进行详细的解释，那些API在之前的基础篇已经公布出来&am…
阅读更多...
Typescript 函数类型详解

Typescript 函数类型详解

Typescript 函数 前言 虽然 JS/TS 支持面向对象编程，但大部分时候还是在写函数。函数是一等公民。本文介绍下如何在 TypeScript 中使用函数，包括： 函数类型声明函数参数类型：可选参数、默认参数、剩余参数函数返回值类型this 类…
阅读更多...
java#5(数组)

java#5(数组)

目录 数组 1.数组的完整格式:数据类型[] 数组名 new 数据类型[]{元素1,元素2......}; 2.数组的简化格式:数据类型[] 数组名 {元素1,元素2......}; 3.数组的地址​编辑 4.数组的索引(下标,角标) 5.length的使用(表示数组的长度:有几个元素) 6.数组动态初始化:初始化时指…
阅读更多...
Redis事务入门及命令

Redis事务入门及命令

文章目录Redis 事务入门及命令事务概念Redis 事务概念Redis 事务特性Redis 三个阶段入门代码示例Redis 相关命令MULTIDISCARDEXECWATCHUNWATCHRedis 事务入门及命令 事务概念 数据库事务( transaction )是访问并可能操作各种数据项的一个数据库操作序列，这些操作要…
阅读更多...
详解 YUV，一文搞定 YUV 是什么！

详解 YUV，一文搞定 YUV 是什么！

YUV 是一个颜色模型，通常用作彩色图像管道的一部分。它对彩色图像或视频进行编码时考虑到了人类的感知，与“直接”的 RGB 表示相比，允许减少色度分量的带宽。历史上，术语 YUV 和 Y’UV 用于电视系统中颜色信息的特定模拟编码。今天…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023