现在不管是路由的权限，还是用户的角色暂时都是本地写死的，所以增加权限修改页体验也不很好，我思考一下怎么展现好一点

谢谢，期待中。
个人建议能否在demo中增加一个Mock接口，然后通过修改store下的permission.js动态从mock中获取的当前token对应的权限，然后在前端页中通过树形结构来动态加载并编辑的它们。

看看翻看了issue的内容，看看有好几个跟我类似的需求，哈哈。请潘神考虑一下。

同求，觉得权限后端获取到比较好

同求，权限从后端获取权限列表

同求，觉得权限后端获取到比较好+1

同求，觉得权限后端获取到比较好+1

同求，觉得权限后端获取到比较好+1

同求~

#1605
已添加

在线demo

之后会添加服务端返回demo

@ycg000344 老兄，你这个貌似只是一级跟二级菜单可以用吧？好像到了三级里面，children就出现不了！

@ycg000344 感谢！解决了~第四步不能省略吗？
// component: isParent ? Layout : () => import(item.component)
这种写法感觉更灵活，但是报找不到模块，求解决办法

@Samdyddd 已经解决，谢谢！

componentsMap[item.name]

怎么解决的

@ycg000344 感谢！解决了~第四步不能省略吗？
// component: isParent ? Layout : () => import(item.component)
这种写法感觉更灵活，但是报找不到模块，求解决办法

我也遇到同样的问题 请问解决了么?

如果直接将 @/router/index.js 中的 asyncRouterMap 存在服务端，_import以及Layout就变成String类型失效了。

component属性先存一个字符串,前端这边拿到进行解析,根据这个component生成一个路径,然后使用正常使用imoprt传入该生成的路径,我现在就这样做的

为什么一直是空白，并且地址还不对，是哪里出现问题了？

@yanglin1994
我建议你用作者提到过的那种键值对形式管理import导入和你的component字段的字符串的关系,就是说那边component存一个字符串标识一下就行了,然后前端这边还要一个对象用来管理,component字符串对应导入哪个组件

@yanglin1994

类似这样的东西

store->modules->permission.js

@Mr-arvin 兄dei , asyncRouterMap 存在服务端，_import以及Layout就变成String类型失效的解决方案你看看是否有帮助。

1. 修改action

    GenerateRoutes({ commit }, data) {
        return new Promise(resolve => {
        const { asyncRouterMap } = data
        const accessedRouters = convertRouter(asyncRouterMap)
        console.log(accessedRouters)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
        })
    }

1. 将后台的路由表进行格式化

/**
 *将后台的路由表进行格式化
 * @param {*} asyncRouterMap
 */
function convertRouter(asyncRouterMap) {
  const accessedRouters = []
  if (asyncRouterMap) {
    asyncRouterMap.forEach(item => {
      var parent = generateRouter(item, true)
      var children = []
      if (item.children) {
        item.children.forEach(child => {
          children.push(generateRouter(child, false))
        })
      }
      parent.children = children
      accessedRouters.push(parent)
    })
  }
  accessedRouters.push({ path: '*', redirect: '/404', hidden: true })
  return accessedRouters
}

1. 对component的处理

function generateRouter(item, isParent) {
  var router = {
    path: item.path,
    name: item.name,
    meta: item.meta,
    // component: isParent ? Layout : () => import(item.component)
    component: isParent ? Layout : componentsMap[item.name]
  }
  return router
}

1. componentsMap 需要在事先定义好

export const componentsMap = {
  example_table: () => import('@/views/table/index'),
  example_tree: () => import('@/views/tree/index'),
  form_index: () => import('@/views/form/index')
}

老哥, 我按照你的这样, 现在点击会跳到404界面, 控制台没有任何报错, 我打印了路由对象, 发现组件的component里面提示
arguments: [异常: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.o (<anonymous>:1:83)]

https://github.com/huan0118/p_admin
动态路由尝试

@Mr-arvin兄dei，asyncRouterMap存在服务端，_import以及Layout就变成String类型有效的解决方案你看看有没有帮助。

1. 修改动作

    GenerateRoutes({ commit }, data) {
        return new Promise(resolve => {
        const { asyncRouterMap } = data
        const accessedRouters = convertRouter(asyncRouterMap)
        console.log(accessedRouters)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
        })
    }

1. 将后台的路由表进行格式化

/**
 *将后台的路由表进行格式化
 * @param {*} asyncRouterMap
 */
function convertRouter(asyncRouterMap) {
  const accessedRouters = []
  if (asyncRouterMap) {
    asyncRouterMap.forEach(item => {
      var parent = generateRouter(item, true)
      var children = []
      if (item.children) {
        item.children.forEach(child => {
          children.push(generateRouter(child, false))
        })
      }
      parent.children = children
      accessedRouters.push(parent)
    })
  }
  accessedRouters.push({ path: '*', redirect: '/404', hidden: true })
  return accessedRouters
}

1. 对组件的处理

function generateRouter(item, isParent) {
  var router = {
    path: item.path,
    name: item.name,
    meta: item.meta,
    // component: isParent ? Layout : () => import(item.component)
    component: isParent ? Layout : componentsMap[item.name]
  }
  return router
}

1. componentsMap 需要在事先定义好

export const componentsMap = {
  example_table: () => import('@/views/table/index'),
  example_tree: () => import('@/views/tree/index'),
  form_index: () => import('@/views/form/index')
}

老哥，我现在会按照你这样的点击打印到404界面，没有问题的报告错误，我的目标对象，发现组件的里面提示 arguments: [异常: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.o (<anonymous>:1:83)]

兄弟解决这个问题没，刚碰到这个问题