Antd Design Pro 中如何动态获取路由替换掉config/route.config.js

joeyFuck
  • 42

新版本的Antd Design Pro使用umi来构建路由。

clipboard.png

而现在是需求是路由会动态增添的,所以不能是下面这种静态文件。思路是将其换成state,但是我将两者输出后,发现umi对其有进行一部分操作。

如下图:

clipboard.png

上面部分是我通过model获取的data,就是数据本身。下面则是umi对data操作后赋值在props上的数据。这样一来,我就不知道如何是好了~~~~

求大神解惑。表达不清晰,见谅。

回复
阅读 16.1k
5 个回答
✓ 已被采纳

通过官方的umi demo能知道动态添加路由是通过app.js下添加patchRoutes实现的,但是antd v2不仅要实现动态路由还要添加basicLayout布局。查看umi编译源码可以发现是通过dynamic方法实现的,所以参照源码:

    /**import \_dvaDynamic from 'dva/dynamic';**/
    path: '/',  
    component: \_\_IS\_BROWSER  
      ? \_dvaDynamic({  
          component: () =>  
            import(/\* webpackChunkName: "layouts\_\_BasicLayout" \*/ '../../layouts/BasicLayout'),  
          LoadingComponent: require('C:/ant-design-pro-v2/src/components/PageLoading/index')  
            .default,  
        })  
      : require('../../layouts/BasicLayout').default,

我们自己的代码:

export function patchRoutes(routes) {  
let routerMap\={  
    Flow:dynamic({ component: () => import('./pages/Editor/GGEditor/Flow' )})  
}  
routes\[1\].routes.unshift(  
{  
  name: 'editor',  
  icon: 'highlight',  
  path: '/editor',  
  routes: \[  
    {  
      authority: \[ 'usr'\],  
      path: '/editor/flow',  
      name: 'flow',  
      component:routerMap.Flow  
}  
  \],  
},  
)

实现效果了!如下↓
image.png
router.config配置中没有editor配置哦
image.png~~~~

pro2是通过route.config.js动态生成对应的umi route配置跟dva配置,高度耦合下要改为动态路由,只能通过后台修改route.config.js文件本身了??求解惑。

Favori
  • 5
新手上路,请多包涵

我也遇到同样的问题,你解决了吗?

多啦先生
  • 3
新手上路,请多包涵

有解决问题的大神吗,求解答

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

宣传栏