Umi: 关于ant design pro 升级 umi3，约定式路由菜单配置的优化建议

[sorryljt]

如题，我umi3发布后，我尝试更新，并打算试一试约定式路由，改成配置时路由后，页面变为无导航模式，可是配置菜单却让我很头疼，我按照文档提示(@umijs/plugin-layout)打算找出点方法，于是找到了这样一段代码

export const routes=  [
  {
    path: '/welcome',
    component: 'IndexPage',
    menu: {
      name: '欢迎', // 兼容此写法
      icon: 'testicon',
    },
    layout:{
      hideNav: true,
    },
    access: 'canRead',
  }
]

我尝试按照这样去在config/router.js中配置菜单，却什么也不生效。是文档不够清晰，还是这里有问题呢？
按照文档提示，config中已经配置过layout相关option。
请指条明路。

[sorrycc]

提供下复现步骤，期望结果，实际结果？

[sorryljt]

因为没有在ant design pro中用过约定式路由，那天尝试换了一下，具体操作步骤如下

1. 删掉config/config.js中删掉router配置
2. 在defineConfig中加入layout配置项
   此时页面为pro默认主题，但无菜单显示
3. 接着看文档至plugin-layout-->扩展的路由配置，新建config/router.js文件夹，加入router
   相关配置，页面还是没有出现菜单。然后找文档就找不见相关东西了。

期望结果

看到umi3更新日志中有提到约定式路由，想尝尝新鲜，可不能很顺利的将菜单、路由、不同布局结合起来。期望有一详细文档能协助在配置式路由和约定式路由之间无缝转换

[doudou003]

21天也是醉了。

我理解的意思是使用@umijs/plugin-layout后，在.umirc.ts或config/config.js中添加

export default defineConfig({
    layout: {},
    ...
});

然后左侧菜单怎么出现？

1. 看文档是自动根据src/pages/目录生成左侧菜单，请问可以吗？
2. 手动添加菜单的方式如何配置？

期望结果

• 使用@umijs/plugin-layout后，可以根据src/pages/目录生成左侧菜单

实际结果

• 左侧菜单无内容

---

以下碎碎念（吃了猪肉又觉得肉少）

• 文档是使用者了解产品的方式，一直在迭代那可以把细节描述清楚可以么？
• 嫁接了一层又一层，把链条上下描述清楚可以体现一个团队的专业性和责任心

文档
清晰的文档会增加开源团队的时间成本！ 但：

（使用者 x 阅读文档时间） > （开源团队 x 完善文档时间）

• 产品功能可以帮助节省时间
• 产品文档同样可以节省时间

文档描述不到的功能，是不是等于没有，至少大大打折！
（至少确保大版本是可以好好撸的）

|
|
|

最后肉是香的，希望在发布4.0时候，3.0文档是完整的，开源不易，加油~ @sorrycc

[singagain]

俺也一样 😶

[ES1993]

感觉 umi3 就是个半成品 造成这个认知 可能 就是 文档跑不通的原因吧。

[LarryZhao0616]

这个umi3文档，我已经醉了。
就拿config router这一件事来说，我能找到的官方文档分两部分。
https://umijs.org/docs/routing
https://umijs.org/config#routes
但是写的极其宽泛，杂乱无比，毫无条理。没一个地方解释name title之间的关系（文档里根本就没有name）。后者还有一个跳往“路由配置章节”的链接也挂了。。。。。。

[aofeng1227]

一直以为是自己白痴不会，没想到你们也一样啊。

[aofeng1227]

如题，我umi3发布后，我尝试更新，并打算试一试约定式路由，改成配置时路由后，页面变为无导航模式，可是配置菜单却让我很头疼，我按照文档提示(@umijs/plugin-layout)打算找出点方法，于是找到了这样一段代码

export const routes=  [
  {
    path: '/welcome',
    component: 'IndexPage',
    menu: {
      name: '欢迎', // 兼容此写法
      icon: 'testicon',
    },
    layout:{
      hideNav: true,
    },
    access: 'canRead',
  }
]

我尝试按照这样去在config/router.js中配置菜单，却什么也不生效。是文档不够清晰，还是这里有问题呢？
按照文档提示，config中已经配置过layout相关option。
请指条明路。

敢问你们 的菜单出来了吗

[zhanglingyugit]

有解决了的吗

[zss1004504439]

怎么解决

[monttailee]

umirc.ts

export default defineConfig({
layout: {
name: ' ',
theme: 'pro',
locale: true,
},
routes: [
{
path: '/login',
layout: false,
component: '@/pages/login',
},
//......
],
})

[sofichael]

路由类似这样配置就可以显示了
config.ts配置layout

app.ts配置layout

routes: [
    {
      path: '/user',
      layout: false,
      routes: [
        {
          name: 'login',
          path: '/user/login',
          component: './User/login',
        },
      ],
    },
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'smile',
      component: './Welcome',
    },
    {
      path: '/admin',
      name: 'admin',
      icon: 'TeamOutlined',
      access: 'canAdmin',
      // component: './Admin',
      routes: [
        {
          path: '/admin/user',
          name: 'user',
          component: './UserList',
        },
        {
          path: '/admin/user/detail/:id',
          name: 'userDetail',
          hideInMenu: true,
          component: './UserDetail',
        },
        {
          path: '/admin/profile',
          name: 'profile',
          component: './ProfileList',
        },
        {
          path: '/admin/profile/add',
          name: 'addProfile',
          hideInMenu: true,
          component: './AddProfile',
        },
        {
          path: '/admin/profile/detail/:id',
          name: 'profileDetail',
          hideInMenu: true,
          component: './ProfileDetail',
        },
      ],
    },
]

[sorrycc]

It's inactive above 3 months, feel free to reopen if still have problems.