需求: vue-element-admin 实现 后台获取菜单, 然后动态绑定到 左侧菜单
代码中的
.
代表上下文, 下面代码只显示修改的部分!
1. 在 src/api/admin-menu.js
新增一个后台获取路由的接口
.
.
export function getAdminMenu(query) {
return request({
url: '/admin_menu/menu',
method: 'post',
params: query
})
}
.
.
2. 注意返回的数据格式, 这个格式是根据 路由文件 src/router/index.js
中的 动态路由 asyncRoutes
的格式
{
"code": 200,
"msg": "success",
"data": [
{
"id": 1,
"path": "system",
"component": "#",
"name": "系统管理",
"meta": {
"title": "系统管理",
"icon": "el-icon-menu"
},
"children": [
{
"id": 2,
"path": "/admin-user/index",
"component": "/admin-user/index",
"name": "管理员管理",
"meta": {
"title": "管理员管理",
"icon": "el-icon-user"
}
},
{
"id": 7,
"path": "/admin-role/index",
"component": "/admin-role/index",
"name": "角色管理",
"meta": {
"title": "角色管理",
"icon": "el-icon-s-cooperation"
}
},
{
"id": 12,
"path": "/admin-menu/index",
"component": "/admin-menu/index",
"name": "菜单管理",
"meta": {
"title": "菜单管理",
"icon": "el-icon-menu"
}
}
]
}
]
}
3. 将路由文件 src/router/index.js
中 asyncRoutes
不需要的部分删除, 如下
export const asyncRoutes = [
{
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 }
}
]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
4. 修改文件 src/store/modules/permission.js
[注意路径!!!], generaMenu
是新加入的方法, 用来处理路由. actions
是在之前的方法上改写, 用来获取路由.注意: 这里的数据放在 data.list 中
.
import {getAdminMenu} from "@/api/admin-menu";
import Layout from "@/layout";
.
.
/**
* 后台查询的菜单数据拼装成路由格式的数据
*/
export function generaMenu(routes, data) {
data.forEach(item => {
// alert(JSON.stringify(item))
const menu = {
path: item.path === '#' ? item.id + '_key' : item.path, // component: item.component === '#' ? Layout : () => import('@/views${item.compent}'),
component: item.component === '#' ? Layout : (resolve) => require([`@/views${item.component}`], resolve),
// hidden: item.hidden,
// redirect: item.redirect,
children: [],
name: item.name,
meta: item.meta
// meta: {title: item.name, id:item.id, roles:['admin']}
}
if (item.children) {
generaMenu(menu.children, item.children)
}
routes.push(menu)
})
}
.
.
const actions = {
generateRoutes({commit}, roles) {
return new Promise(resolve => {
const loadMenuData = []
// 先查询后台并返回左侧菜单数据并把数据添加到路由
getAdminMenu().then(response => {
let data = response
if (response.code !== 200) {
alert(JSON.stringify('菜单数据加载异常'))
// throw new Error('菜单数据加载异常')
} else {
data = response.data
Object.assign(loadMenuData, data)
const tempAsyncRoutes = Object.assign([], asyncRoutes)
// tempAsyncRoutes = asyncRoutes
generaMenu(tempAsyncRoutes, loadMenuData)
let accessedRoutes
if (roles.includes('admin')) {
// alert(JSON.stringify(asyncRoutes)
accessedRoutes = tempAsyncRoutes || []
} else {
accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
}
// generaMenu(asyncRoutes, data
}).catch(error => {
console.log(error)
})
})
}
}
.
.