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,
},
如图:
当点击【新建】按钮和【编辑】按钮的时候(采用命令式跳转history.push('路径')
),左侧菜单和【面包屑导航】如图:
结果:父级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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
请问博主解决这个问题了吗
一直也没有时间研究,抽个空补充一下临时解决的办法,但是缺陷是:父级仍然激活不了状态。
如下是临时解决功能可以正常运行的嵌套配置菜单:
这个方式下,没有测试官方说的【相对路径】的设置方式,还是采用的【绝对路径】。测试了,在
history.push
中进行跳转,用不了相对路径,所以为了跳转的书写路径和配置路径都保持了一致采用了【绝对路径】(好粘贴复制嘛)。哪里有问题 请大神指教~~~