Ant-design-pro: 如何配置不展示在菜单中的router

[fatesq]

nav里通过不写name可以使页面在左侧菜单不展示，但是没有name又会影响到面包屑

[superWendell]

@fatesq const breadcrumbNameMap = { '/member/list': '会员列表', '/member': '会员管理', '/member/list/info': '会员详情' }; 这样传参到PageHeaderLayout可以解决这个问题只是不优美，但他们的源代码里又提供了这个参数

[superWendell]

可以在有冲突的这个页面，单独传这个参数，不会影响到其它地方

[remotesc2]

@superWendell
正好也碰到了这个问题。。。
你说的没太明白

[superWendell]

@remotesc2

[remotesc2]

@superWendell

谢谢！
效果是实现了，不过不得不说真的好绕~~~
感觉这个架子还是应该有个更直观的配置思路

[Agagy]

我是这么写的，但是上级菜单没有选中。

重新改了下，放在这里可以把一级菜单也过滤了。

[Agagy]

[remotesc2]

这个方法不错~
是不是官方可以吸收下~

[renyi818]

@Agagy 感谢提供思路，请问如果是子路由要隐藏，父路由是二级菜单的话，需要被点击选中，该如何处理？例如：

这里的用户管理实际上是个二级菜单，如果这样配置了，就无法被点击。
但是如果将子路由单独放至另外一个单独菜单里，是可以实现，但是面包屑的层级又不对了。

[superWendell]

@renyi818

这种方法就可以了，但是现在感觉还是很怪，因为如果做后端管理，那么这种设计又不是标准的JSON格式，对权限这块是个大问题

[superWendell]

@renyi818 子路由不能有 name 属性

[Agagy]

@renyi818 你可以在父路由上添加一个hideChild属性，讲道理这样是可以的。

[renyi818]

@superWendell 谢谢你的回答：） 我试了下没试成功，详情如下。

@Agagy 好的，我再试试你的这个办法，感谢！

[renyi818]

@Agagy 👍，这样确实可以让下级不出来。
但是还是存在2个问题：
1.子路由跳转不成功，url变化，页面不变。 （很奇怪，单独放到2级菜单，就可以跳转，只要放到3级，作为子路由就失效，不知道是不是与动态参数有关）
2.左侧的菜单没有选中效果， 即底色没有变为蓝色。

还是感谢你的回答哈！

[Agagy]

@renyi818 我也在改这个东西，等我改好了再跟你说下。

[mutouzdl]

@renyi818 根据大家的讨论，我改了一下，可以实现效果，但不知道有没有其他问题：

BasicLayout.js的getNavMenuItems：

utils.js的getPlainNode：

nva.js的配置：

[renyi818]

@Agagy 👍 好的，谢谢！

@mutouzdl 👍 这样是可以的，谢谢！
不过我这还存在一个问题，不知道你那边是否存在：点击菜单，左侧的菜单没有选中效果， 即底色没有变为蓝色。

[mutouzdl]

@renyi818 我这边试了，没有这个情况。你这个情况是正常菜单也会吗？

[renyi818]

@mutouzdl 正常菜单不会，我知道原因了，是因为我在菜单里面加了个“key”属性，之前因为使用旧的方法，会有重名菜单，所以按照官方推荐的方式加了个key属性区分。 去掉后就好了。
谢谢提供的方法！👍

[renyi818]

@mutouzdl 抱歉，发现还存在点小问题，还请教哈，如下：

如上图所说：
1.如果存在动态参数，想要让固定url的匹配上，则需要将其放前面（已经解决）
2.但是如果存在多个子路由有动态参数，则我想的方式是加前缀区分，但是一旦增加前缀，则面包屑会显示成url英文。不知道你有没有碰到过？

[mutouzdl]

@renyi818 我觉得，用户详情应该这样配置：

{
    name: '用户详情',
    path: 'edit',
    isHide: true,
    children: [
        {
            name: '用户详情',
            path: ':id',
            component: dynamicWrapper(app, ['user'], () => import('../routes/Sys/UserView')),
        }
    ],
}

我参照官方文档的：带参数的路由配置

[renyi818]

@mutouzdl 再次感谢您的细心回复：） 恰好我之前也是看的这份文档来配置的动态参数，当时尝试过，代码如下：

可是会出现面包屑重复的问题，如下图

并且前面那个用户详情的链接点击还会无效果，因为没有参数传递进去。
所以我才放弃了T_T ,转而想是不是拼接在一起的方式能解决，因为这种方式在构造breadcrumbNameMap的时候，不会多一个sys/user/edit . 但还是失败，还是会多一个层级，而且那个层级还是url名称，如下：
“首页/系统管理/用户管理/ /sys/user/edit /用户详情”

[renyi818]

@mutouzdl 想了个笨办法解决了。

链接还是采用的拼接的方式：

本来觉得解决办法太 low，T_T不太想献丑。想想还是给其他人多看条路吧。如果各位有更好的解决方案，还请不吝提供😄
修改的PageHeader组件的index.js，在下图中增加了一行判断，过滤了那个没法显示的中间段。

[superlbr]

感觉这个菜单设计没有antd-admin舒服，灵活性较差

[Liqiankun]

我也遇到这个问题，大家是怎么解决的？

[Liqiankun]

@mutouzdl 用户详情照你那么写可以吗？能实现功能吗？

{
    name: '用户详情',
    path: 'edit',
    isHide: true,
    children: [
        name: '用户详情',
        path: ':id',
        component: dynamicWrapper(app, ['user'], () => import('../routes/Sys/UserView')),
    ],
}

[mutouzdl]

@Liqiankun 不好意思，children里少写了花括号，已修正。
按这么写是可以的，但是，和@renyi818 说的一样，面包屑不太美观（出现两个用户详情），我只用了三级菜单，参数路由暂时没用到，你试试他说的方法？

[kevinchun805]

@Liqiankun

根據 @renyi818 把breadcrumb 修改，暫時可以使用

{
    name: '用户管理',
    path: 'user',
    children: [
        name: '用户详情',
        path: 'edit/:id',
        isHide: true,
        component: dynamicWrapper(app, ['user'], () => import('../routes/Sys/UserView')),
    ],
}

[stdhi]

不加name。就没有了。

[Ch2x]

@mutouzdl 小白好奇问下，之前三级有组件后，四级的组件是不能显示的。按你的设置后，三级的父组件不再挡住四级的子组件了。这是什么原因。。

[mutouzdl]

@Ch2x 能看看你的配置代码吗？

[Ch2x]

@mutouzdl 当时要把用户管理的component删除才能看到用户详情页
children: [
{
name: '身份管理',
icon: 'dashboard',
path: 'identityManagement',
children: [
{
name: '用户管理',
path: 'userManagement',
component: dynamicWrapper(app, ['rule'], () => import('../routes/IdentityManagement/UserManagement')),
children: [
{
name: '用户详情页',
path: 'userDetails',
isHide: true,
component: dynamicWrapper(app, ['form', 'rule'], () => import('../routes/IdentityManagement/UserDetails')),
},
]
},

[mutouzdl]

@Ch2x 明白你的意思了，你是说，【上级菜单有配置component的情况下，下级菜单还是显示出来了】，因为我对utils.js的getPlainNode函数的改动是，有children属性就会把children添加进来，children里的菜单的显示隐藏则由isHide属性来控制。

[Ch2x]

@mutouzdl 可能我表达错了，是content区域的内容，因为父组件不是要给子组件留下空间渲染东西，所以父组件用了component把content区域占满的话，子组件不是没有空间了吗，之前我遇到情况是这样的，不知道是不是我理解错了

[mutouzdl]

@Ch2x 不好意思，我可能还是没理解你的意思...菜单和区域内容？我应该是没遇到过你说的情况，所以不是很明白

[Ch2x]

@mutouzdl 好吧，谢谢你的热心回答（手动点赞）

[waltcow]

hope it helps

[yysfwls]

不加name的话 umi报错了欸