Antd Design Pro2 多页签下,两个路由使用同一组件,页面如何独立

joeyFuck
  • 42

情况是这样的,我现在使用Antd Design Pro2 ,然后项目需要实现了多页签。

clipboard.png

然后又有一个需求,就是用户可以自己配置生成新的查询表格页面。我的实现思路是,定义一个公共组件,根据用户的配置渲染不同的Dom,如A页面:两个input,B页面:三个Input。

也就是说现在A B两个页面虽然是两个不同的路由,但是用的是同一组件。


{
            path: '/list/table-basic-searchA',//路由不同
            name: 'basicsearchA',
            component: './List/BasicSearch',//组件同一个
            search:{
              id:'123456'//参数不同
            },
          },
          {
            path: '/list/table-basic-searchB',//路由不同
            name: 'basicsearchB',
            component: './List/BasicSearch',//组件同一个
            search:{
              id:'456789'//参数不同
            },
          }, 

问题所在!

但是现实很骨感,由于用的是同一组件,所以每次打开B页面,会导致A页面的状态被B页面的状态同步掉,也就是说,本来A页面只有两个Input,一打开B页面,A页面的Input也变三个了。

以前我们的多页签应用都是通过Iframe实现,没有这种问题。这个也是第一次遇到。

碰碰运气,不知道有高手能给个解决思路不。

这里A页面是5个Input,B页面是6个Input

clipboard.png

clipboard.png

clipboard.png

回复
阅读 6.3k
5 个回答

我这边多路由的状态管理是自己用redux实现的,我之前的问题是多个路由对应了一个state,后来将多个路由的state分为多个,就解决了。至于状态管理如何用redux实现, 我这边没现成写好的答案,你们可以百度下。

兄弟,我刚用Antd-Pro,一上来boss就让我搞定多标签的问题。所以兄弟,能否让我借鉴下

阿友
  • 1
新手上路,请多包涵

同样的问题,请问解决了吗

宣传栏