Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.2k views
in Technique[技术] by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...