跪求版主增加动态菜单 #286

Danbaoshan · 2017-11-16T03:43:07Z

首先感谢版主分享，同时还希望有空的时候能加一下动态菜单的功能，万分感激。

动态菜单：
router完全由后台配置，通过请求获得 router信息，前端再通过 addRouter实现真正可访问的路由，
比如：
"path":"/menuTwo", "component":"Home", "name":"导航2", "iconCls":"el-icon-setting", "leaf":false, "children":[ { "path":"menuTwoone", "component":"Main", "leaf":true, "name":"导航2--1级菜单1" }, { "path":"menuTwotwo", "component":"Main", "leaf":true, "hidden":true, "name":"导航2--1级菜单2" } ] 这个数据是通过请求获得的Json数据，再把这个数据与前段相关的组件联系在一起，生成路由和菜单，本人新手尝试做这个功能，无奈，老是报路径‘xx’是字符串，请使用真正的组件这个错误。

The text was updated successfully, but these errors were encountered:

reuwi · 2017-12-03T15:23:08Z

路由表里面的这个component是字符串路径,请求获取后,在本地map到相对应的组件就可以了

reuwi · 2017-12-03T15:23:40Z

#293

Danbaoshan · 2017-12-04T02:24:53Z

感谢回答，大哥能贴一下你代码吗？我实在是搞不定啊！先看看我的
Map:
`const _import = require('./import' + process.env.NODE_ENV)
import Layout from '../views/layout/Layout'

export const RouterMap={
Layout:Layout,
basicparamIndex:_import('svg-icons/index')
}Map 与后端数据替换：export function generaMenu(data){
console.log("参数："+data)
var routers=[]
data.forEach((item)=>{
let menu = Object.assign({},item)

console.log("menu:"+menu.component)
console.log("RouterMap:"+RouterMap['Layout'])
menu.component = RouterMap[menu.component]
// if(!item.leaf){
//   menu.children = []
//   generaMenu(item.children)
// }
routers.push(menu)

})
return routers
}`
最后还是一样的错误
[vue-router] route config "component" for path: index cannot be a string id. Use an actual component instead.

希望能贴一下你的代码，前端的组件与后端字符串替换的部分。有完整demo更好

reuwi · 2017-12-05T02:00:15Z

我是这样写的:

//router/index.js
export const routerMap={
 table:_import('table/index')
}

//通过后台请求的路由表,写法跟原本的一样,需要改的地方是component这里,改成map里面组件对应的key值
[
   {
     path: '/table,
     component: 'table',
     redirect: 'noredirect',
     name: 'table',
    }
]

//store/modules/permission.js
import { constantRouterMap, map } from '@/router/index'
// 将本地routerMap映射到ajax获取到的serverRouterMap;
function generateAsyncRouter(routerMap, serverRouterMap) {
  serverRouterMap.forEach(function (item, index) {
    item.component = routerMap[item.component]
    if(item.children && item.children.length > 0){
      generateAsyncRouter(routerMap, item.children)
    }
  })
  return serverRouterMap;
}
//然后在actions中GenerateRoutes方法合适的地方将后端请求的路由表映射到routerMap,并筛选出可访问的路由,serverRouterMap是我定义的从后台请求路由表的方法
serverRouterMap().then(response => {
          var asyncRouterMap = generateAsyncRouter(routerMap, response.data.serverRouterMap)
          if (roles.indexOf('admin') >= 0) {
            accessedRouters = asyncRouterMap
          } else {
            accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
          }
          commit('SET_ROUTERS', accessedRouters)
          resolve()
        })

Danbaoshan · 2017-12-05T14:21:12Z

卧槽，感谢感谢，成功了

superjiangs · 2018-01-18T14:56:17Z

小弟我还是有点迷茫啊，大神们

longzhanpeng · 2018-07-01T12:54:05Z

我也是后台返回导航菜单，但是映射的时候总是报undefined。
这是后台返回的菜单：
{
"code": 20000,
"data": {
"roles": [
{
"path": "/form2",
"component": "Layout",
"redirect": "/form2/index2",
"name": "permission",
"children": [
{
"path": "index2",
"name": "Form2",
"component": "table"
}
]
},
{
"path": "/form3",
"component": "Layout",
"alwaysShow": true,
"redirect": "/form2/index2",
"name": "permission2",
"children": [
{
"path": "index3",
"name": "Form3",
"component": "form"
}
]
},
{
"path": "/form3",
"component": "Layout",
"children": [
{
"path": "index",
"name": "Form",
"component": "form2"
}
]
}
],
"name": "editor",
"avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
}
}

处理数据这里：
GenerateRoutes({ commit }, data) {
return new Promise(resolve => {
const { asyncRouterMap } = data
console.log(data + 'data=============')
console.log(asyncRouterMap)
const accessedRouters = convertRouter(asyncRouterMap)
commit('SET_ROUTERS', accessedRouters)
resolve()
})
}

然后这里：
const { asyncRouterMap } = data
赋值不成功麻烦，不知道是不是数据的问题。

wlLeblanc · 2018-08-22T02:00:58Z

@gaoshijun1993 ,大佬，请问下动态获取路由表信息是在什么地方获取的？

wlLeblanc · 2018-08-24T02:22:29Z

@Danbaoshan请问下您是怎么解决的？

Danbaoshan · 2018-08-24T08:52:15Z

@wlLeblanc 按照5楼大哥的写法就可以实现

wlLeblanc · 2018-09-04T01:27:42Z

@Danbaoshan 请问下我这样做映射怎么就不对？
左边导航栏有数据，但是进去页面就是空白

wlLeblanc · 2018-09-04T01:51:12Z

@gaoshijun1993 可以帮忙解决一下吗？感谢感谢！

chen-can · 2018-10-17T02:42:33Z

我也遇到同样的问题 @wlLeblanc 解决了吗

wd308389182 · 2019-01-10T13:27:47Z

好厉害，明天我试试

SkyGrass · 2019-01-31T06:38:07Z

父级的component 也要做映射！！！@chen-can @wlLeblanc @wd308389182

weiving · 2019-02-25T09:32:07Z

我是这样写的:

//router/index.js
export const routerMap={
 table:_import('table/index')
}

//通过后台请求的路由表,写法跟原本的一样,需要改的地方是component这里,改成map里面组件对应的key值
[
   {
     path: '/table,
     component: 'table',
     redirect: 'noredirect',
     name: 'table',
    }
]

//store/modules/permission.js
import { constantRouterMap, map } from '@/router/index'
// 将本地routerMap映射到ajax获取到的serverRouterMap;
function generateAsyncRouter(routerMap, serverRouterMap) {
  serverRouterMap.forEach(function (item, index) {
    item.component = routerMap[item.component]
    if(item.children && item.children.length > 0){
      generateAsyncRouter(routerMap, item.children)
    }
  })
  return serverRouterMap;
}
//然后在actions中GenerateRoutes方法合适的地方将后端请求的路由表映射到routerMap,并筛选出可访问的路由,serverRouterMap是我定义的从后台请求路由表的方法
serverRouterMap().then(response => {
          var asyncRouterMap = generateAsyncRouter(routerMap, response.data.serverRouterMap)
          if (roles.indexOf('admin') >= 0) {
            accessedRouters = asyncRouterMap
          } else {
            accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
          }
          commit('SET_ROUTERS', accessedRouters)
          resolve()
        })

为什么我的路由映射不行，解析不出来。component的值是Promise？？？

GenerateRoutes({commit}, data) {
  return new Promise(resolve => {
    const roles = data.roles;
    let accessedRouters;
    getAccountPower(roles).then(response => {
      console.log('后台获取的路由表', response.data);
      var asyncRouterMap = generateAsyncRouter(routerMap, response.data);
      // console.log('asyncRouterMap',asyncRouterMap);
      if (roles.indexOf('admin') >= 0) {
        accessedRouters = asyncRouterMap
      } else {
        accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
      }
      commit('SET_ROUTERS', accessedRouters)
      resolve();
    });

  })
}

//将本地routeMap映射到ajax获取到的serverRouteMap
function generateAsyncRouter(routerMap, serverRouterMap) {
serverRouterMap.forEach(function (item, index) {
item.component = routerMap[item.component];
console.log('item.component', item.component);
if (item.children && item.children.length > 0) {
generateAsyncRouter(routerMap, item.children)
}
})
return serverRouterMap;
}

reuwi · 2019-02-26T03:17:35Z

@weiving 参考下我前几天的pr的

weiving · 2019-03-01T02:03:23Z

@weiving 参考下我前几天的pr的

已解决，是我自己代码写错了= =

MingLiuHN · 2019-05-22T02:50:13Z

@Danbaoshan请问下我这样做映射怎么就不对？
左边导航栏有数据，但是进去页面就是空白

请问解决了吗,我也遇到同样的问题了.

mamba-in · 2019-06-06T01:22:49Z

@gaoshijun1993 请问我应该让后台给什么格式的数据呢，我还是不太懂，是把本地的asyncRouterMap在服务器端寸一份，让服务器给返回当前用户拥有的router是吗

wanliofficial · 2019-07-10T14:08:06Z

@Danbaoshan请问下我这样做映射怎么就不对？
左边导航栏有数据，但是进去页面就是空白

请问解决了吗,我也遇到同样的问题了.

router.addRoutes(newRouter)后需要next({ ...to, replace: true })
参考:https://segmentfault.com/q/1010000015875314

wanliofficial · 2019-07-10T14:08:29Z

@Danbaoshan 请问下我这样做映射怎么就不对？
左边导航栏有数据，但是进去页面就是空白

router.addRoutes(newRouter)后需要next({ ...to, replace: true })
参考:https://segmentfault.com/q/1010000015875314

hanxiaosss · 2019-10-30T06:03:00Z

#293

map进去了点击菜单报找不到模块是怎么回事啊，路径都是对的

LiuLHui · 2019-11-06T09:18:30Z

路由表里面的这个component是字符串路径,请求获取后,在本地map到相对应的组件就可以了

大佬我想问你一下，后台返回路由是一股脑全部返回回来吗。还是说针对角色只返回能看到的路由啊；
那部分的一些操作权限你这边是怎么处理的呢

huangshizhan · 2019-11-29T06:42:12Z

我是这样写的:

//router/index.js
export const routerMap={
 table:_import('table/index')
}

//通过后台请求的路由表,写法跟原本的一样,需要改的地方是component这里,改成map里面组件对应的key值
[
   {
     path: '/table,
     component: 'table',
     redirect: 'noredirect',
     name: 'table',
    }
]

//store/modules/permission.js
import { constantRouterMap, map } from '@/router/index'
// 将本地routerMap映射到ajax获取到的serverRouterMap;
function generateAsyncRouter(routerMap, serverRouterMap) {
  serverRouterMap.forEach(function (item, index) {
    item.component = routerMap[item.component]
    if(item.children && item.children.length > 0){
      generateAsyncRouter(routerMap, item.children)
    }
  })
  return serverRouterMap;
}
//然后在actions中GenerateRoutes方法合适的地方将后端请求的路由表映射到routerMap,并筛选出可访问的路由,serverRouterMap是我定义的从后台请求路由表的方法
serverRouterMap().then(response => {
          var asyncRouterMap = generateAsyncRouter(routerMap, response.data.serverRouterMap)
          if (roles.indexOf('admin') >= 0) {
            accessedRouters = asyncRouterMap
          } else {
            accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
          }
          commit('SET_ROUTERS', accessedRouters)
          resolve()
        })

大佬，请问而这个动态路由的分支项目有吗？

nameJw · 2020-05-09T01:27:30Z

父级的component 也要做映射！！！@chen-can @wlLeblanc @wd308389182

是的，父级component也要做映射，还有还得加上循环加上meta，因为菜单栏是根据meta的title来显示菜单的，对吗？

cy15210468071 · 2020-11-17T01:49:54Z

跪求动态权限菜单如何做，如何改动store/modules/permission.js这个文件

后台数据：
data: {id: "04e5a2fe-226a-11eb-acad-005056a6bd8d", userCode: "admin", userName: "admin",…}
buttonInfos: [{resouceCode: "useradd", rosouceName: "新增", resouceIcon: "", resouceUrl: "", resouceSeq: null,…},…]
departmentId: "10caad21-d9eb-4a57-950b-c28395454f68"
departmentName: null
id: "04e5a2fe-226a-11eb-acad-005056a6bd8d"
menuInfos: [,…]
0: {id: "04e5a2fe-226a-11eb-acad-005056a6bd8d", resouceCode: "R0001", rosouceName: "系统管理", parentId: null,…}
childMenus: [{id: "04e5a2fe-226a-11eb-acad-005056a6bd81", resouceCode: "R000101", rosouceName: "用户管理",…},…]
0: {id: "04e5a2fe-226a-11eb-acad-005056a6bd81", resouceCode: "R000101", rosouceName: "用户管理",…}
childMenus: []
id: "04e5a2fe-226a-11eb-acad-005056a6bd81"
parentId: "04e5a2fe-226a-11eb-acad-005056a6bd8d"
resouceCode: "R000101"
resouceIcon: null
resouceSeq: 1
resouceUrl: "/user/index"
rosouceName: "用户管理"
1: {id: "6422c53f-c18a-4981-8ac1-bbdcb7ce2d5e", resouceCode: "R0004", rosouceName: "菜单管理",…}
2: {id: "95e4377e-5435-4152-99b2-b980fc50023c", resouceCode: "j003", rosouceName: "角色管理",…}
3: {id: "52dca850-d9cf-4350-a071-565da024be15", resouceCode: "R0003", rosouceName: "部门管理",…}
id: "04e5a2fe-226a-11eb-acad-005056a6bd8d"
parentId: null
resouceCode: "R0001"
resouceIcon: null
resouceSeq: 1
resouceUrl: null
rosouceName: "系统管理"
roleList: ["R0001"]
userCode: "admin"
userName: "admin"
message: null
status: 200

Danbaoshan closed this as completed Nov 16, 2017

reuwi mentioned this issue Apr 9, 2018

请问路由配置可以动态的改变吗? #293

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

跪求版主增加动态菜单 #286

跪求版主增加动态菜单 #286

Danbaoshan commented Nov 16, 2017

reuwi commented Dec 3, 2017

reuwi commented Dec 3, 2017

Danbaoshan commented Dec 4, 2017 •

edited

Loading

reuwi commented Dec 5, 2017 •

edited

Loading

Danbaoshan commented Dec 5, 2017

superjiangs commented Jan 18, 2018

longzhanpeng commented Jul 1, 2018

wlLeblanc commented Aug 22, 2018

wlLeblanc commented Aug 24, 2018

Danbaoshan commented Aug 24, 2018

wlLeblanc commented Sep 4, 2018

wlLeblanc commented Sep 4, 2018

chen-can commented Oct 17, 2018

wd308389182 commented Jan 10, 2019

SkyGrass commented Jan 31, 2019

weiving commented Feb 25, 2019

reuwi commented Feb 26, 2019

weiving commented Mar 1, 2019

MingLiuHN commented May 22, 2019

mamba-in commented Jun 6, 2019

wanliofficial commented Jul 10, 2019

wanliofficial commented Jul 10, 2019

hanxiaosss commented Oct 30, 2019

LiuLHui commented Nov 6, 2019

huangshizhan commented Nov 29, 2019

nameJw commented May 9, 2020

cy15210468071 commented Nov 17, 2020

跪求版主 增加动态菜单 #286

跪求版主 增加动态菜单 #286

Comments

Danbaoshan commented Nov 16, 2017

reuwi commented Dec 3, 2017

reuwi commented Dec 3, 2017

Danbaoshan commented Dec 4, 2017 • edited Loading

reuwi commented Dec 5, 2017 • edited Loading

Danbaoshan commented Dec 5, 2017

superjiangs commented Jan 18, 2018

longzhanpeng commented Jul 1, 2018

wlLeblanc commented Aug 22, 2018

wlLeblanc commented Aug 24, 2018

Danbaoshan commented Aug 24, 2018

wlLeblanc commented Sep 4, 2018

wlLeblanc commented Sep 4, 2018

chen-can commented Oct 17, 2018

wd308389182 commented Jan 10, 2019

SkyGrass commented Jan 31, 2019

weiving commented Feb 25, 2019

reuwi commented Feb 26, 2019

weiving commented Mar 1, 2019

MingLiuHN commented May 22, 2019

mamba-in commented Jun 6, 2019

wanliofficial commented Jul 10, 2019

wanliofficial commented Jul 10, 2019

hanxiaosss commented Oct 30, 2019

LiuLHui commented Nov 6, 2019

huangshizhan commented Nov 29, 2019

nameJw commented May 9, 2020

cy15210468071 commented Nov 17, 2020

跪求版主增加动态菜单 #286

跪求版主增加动态菜单 #286

Danbaoshan commented Dec 4, 2017 •

edited

Loading

reuwi commented Dec 5, 2017 •

edited

Loading