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 = [
]
扫一扫
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
