antd中umi的配置式路由如何页面内跳转嵌套路由

发布于 2022-09-12 13:21:22 字数 1812 浏览 34 评论 0

antd中umi的配置式路由如何页面内跳转嵌套路由?


举例
配置式路由:

 {
   name: 'list.salaryOrganizationList',
   path: '/salaryOrganizationList',
   component: './organization/SalaryOrganizationList',
 },
 {
   name: 'form.salaryOrganizationAdd',
   path: '/salaryOrganizationList/add',
   component: './organization/SalaryOrganizationForm',
   hideInMenu: true,
 },
 {
   name: 'form.salaryOrganizationEdit',
   path: '/salaryOrganizationList/edit/:id',
   component: './organization/SalaryOrganizationForm',
   hideInMenu: true,
 },

如图:
image.png

当点击【新建】按钮和【编辑】按钮的时候(采用命令式跳转history.push('路径')),左侧菜单和【面包屑导航】如图:
image.png
结果:父级list没有被激活,同时不能满足业务需要:层级展示模块。


改造后:

如何将上述改造成:(嵌套路由,并完成左侧菜单的层级展示)

{
  name: '组织管理organization',
  icon: 'smile',
  path:'/organization',
  routes:[
    {
      name: '代发工资机构设置list.salaryOrganizationList',
      path: '/organization/salaryOrganizationList',
      component: './organization/SalaryOrganizationList',
      exact:true,
      routes:[
        {
          name: 'form.salaryOrganizationAdd',
          path: '/organization/salaryOrganizationList/add',
          component: './organization/SalaryOrganizationForm',
          hideInMenu: true,
        },
        {
          name: 'form.salaryOrganizationEdit',
          path: '/organization/salaryOrganizationList/edit/:id',
          component: './organization/SalaryOrganizationForm',
          hideInMenu: true,
        },
      ]
    },
  }

改造后遇到的问题:
1.同样无法激活父级菜单
2.点击【新建】和【编辑】(采用命令式跳转history.push('路径')),url路径发生了变化,但是组件停留在父级list页面渲染并没有渲染add和detail页面对应的组件

如果哪里有低级错误,请大佬耐心指正,初出茅庐,希望大佬们救救急~~~

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

汹涌人海 2022-09-19 13:21:22

请问博主解决这个问题了吗

霊感 2022-09-19 13:21:22

一直也没有时间研究,抽个空补充一下临时解决的办法,但是缺陷是:父级仍然激活不了状态。
image.png


如下是临时解决功能可以正常运行的嵌套配置菜单:

{
  path: '/visitor',
  routes: [
    {
      name: 'recruitmentInfo',
      icon: 'smile',
      path: '/visitor/recruitmentInfo/:id',
      component: './recruitment/RecruitmentInfo',
    },
    {
      name: 'recruitmentDeliver',
      icon: 'smile',
      path: '/visitor/recruitmentDeliver/:id',
      component: './recruitment/RecruitmentDeliver',
    },
  ],
},

这个方式下,没有测试官方说的【相对路径】的设置方式,还是采用的【绝对路径】。测试了,在history.push中进行跳转,用不了相对路径,所以为了跳转的书写路径和配置路径都保持了一致采用了【绝对路径】(好粘贴复制嘛)。

哪里有问题 请大神指教~~~

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文