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

新手上路,请多包涵

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页面对应的组件

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

阅读 8k
2 个回答
新手上路,请多包涵

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

新手上路,请多包涵

一直也没有时间研究,抽个空补充一下临时解决的办法,但是缺陷是:父级仍然激活不了状态。
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中进行跳转,用不了相对路径,所以为了跳转的书写路径和配置路径都保持了一致采用了【绝对路径】(好粘贴复制嘛)。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题