vue-element-admin 后台返回路由表 前端动态挂载的坑

自己公司要做一个后台系统，奈何本咸鱼没做过啊，没办法只能边学边做。

以下vue-element-admin简称aed吧，懒得手打啦！

相信小伙伴们都知道aed 里 router/index.js中的asyncRoutes是用来动态识别权限动态挂载的。但我的项目角色是可以增删改的，角色不固定不能套用aed本来那套写死的role角色判断权限的办法。

于是机智（人蠢）的我，就打算把整个路由表组装好json，然后传给后端保存起来，什么角色对应着我保存的路由表。

然后问题来了，登录时候拿到后端传回来的json路由表，该怎么引入compoments。

于是我就这样子递归：（cv工程师）

export function getAsyncRoutes(routes) {
  const res = []
  const keys = ['path', 'name', 'children', 'redirect', 'alwaysShow', 'meta', 'hidden']
  routes.forEach(item => {
    
    const newItem = {}
    if (item.component) {
      if (item.component === 'layout/Layout') {
        newItem.component = Layout
      } else {
        newItem.component = ()=> import(`@/${item.component}.vue`)
      }
    }
    for (const key in item) {
      if (keys.includes(key)) {
        newItem[key] = item[key]
      }
    }
    if (newItem.children && newItem.children.length) {
      newItem.children = getAsyncRoutes(item.children)
    }
    res.push(newItem)
  })
  return res
}

然后报错了。

 找不到模块，路径是没问题。那么就是Import方式不对。

于是找百度，找到这个方法

先定义一个引入函数

// 根据后台返回的路径，生成页面的组件模版
function loadView(component) {
  console.log(component)
  return (resolve) => require([`@/${component}.vue`], resolve)
}

 然后改一下

export function getAsyncRoutes(routes) {
  const res = []
  const keys = ['path', 'name', 'children', 'redirect', 'alwaysShow', 'meta', 'hidden']
  routes.forEach(item => {
    
    const newItem = {}
    if (item.component) {
      if (item.component === 'layout/Layout') {
        newItem.component = Layout
      } else {
        newItem.component = loadView(item.component)
      }
    }
    for (const key in item) {
      if (keys.includes(key)) {
        newItem[key] = item[key]
      }
    }
    if (newItem.children && newItem.children.length) {
      newItem.children = getAsyncRoutes(item.children)
    }
    res.push(newItem)
  })
  return res
}

这样也还会报错，报错我没有截图，懒得放出来了。有个奇怪的报错是elementui 的$sideBarWidth样式变量找不到。去到style/sidebar.scss里可以看到这个变量

 既然没有，那就给他加上。

 哦对了，还有一点，用require动态添加文件的话，需要把package.json文件里的babel-eslint版本改成7.2.3才行。先把原来的babel-eslint卸载掉，npm uninstall babel-eslint就行了，然后 再改版本号，再npm i babel-eslint。

这样就解决了路由引入组件的问题啦！~