• 4
  • 新人请关照

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

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

阅读 508
评论
    2 个回答
    • 2
    • 新人请关照

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

      • 4
      • 新人请关照

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

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

        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章