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

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

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

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

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

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

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

同求~

同样求

请问这个功能会考虑更新么？

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

@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()
        })
    }

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

/**
 *将后台的路由表进行格式化
 * @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
}

3. 对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
}

4. componentsMap 需要在事先定义好

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

还是直接根据权限判断比较好维护

确实，实际项目中还是需要可视化配置权限功能，辛苦大神了

@ycg000344 额你这个方法好像不行，菜单可以渲染了，但是打开是空白页；

@Samdyddd
你需要确认一下第三步中的

componentsMap[item.name]

还有F12里面的报错信息来改了。

哦哦，多谢你的回答了。我后来发现没有addRoutes(),现在搞定。3Q

这个现在有demo出来不

@Samdyddd 兄弟你那个打开时空白页是怎么解决的？谢谢！

@Samdyddd 已经解决，谢谢！

@ycg000344

你好，场景是在某个表格页面里 点详情按钮的时候跳转到详情页（不采用dialog的方案）。这样的话问题如下：

动态路由返回了以后，如果我要在里面再套一层children路由的话。
是不是只能在后台menu表里再加一层子节点了。。

前端再写一份路由（用来存这些详情页面），点详情后 ，整个页面跳转到这个路由。这样的话就是要多拼一份路由 。

想问问答主怎么处理的

我觉得对于SPA系统，菜单和权限最好分开考虑设计。权限针对后台RESTFul接口，用户是否有访问某一个接口的权限，由后台权限系统控制并判断。前台的路由只是用于生成菜单，而菜单，其实做不一安全管控，毕竟只是前台的显示与否而已，所以，他的作用是加强用户体验，让用户看不到自己没有权限的界面的菜单。

这样，逻辑就清析了。

权限控制单独由后台管理。

菜单作为资源的一种，由管理员配置针对哪些角色显示哪些。
@PanJiaChen @tong3jie

这个菜单栏走数据库的方法还没实现吗？

@ycg000344 谢谢 ，已经按照你的方式实现了

@Samdyddd 已经解决，谢谢！

请问下怎么解决的啊

#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

类似这样的东西

@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')
}

老哥们 这个在哪改啊

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)]

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