vue-element-admin 路由动态绑定

需求: 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)
      })
    })
  }
}
.
.

5. 展示