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

joeyFuck

4321119

发布于
2018-10-29

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

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

如下图：

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

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

antd

阅读 25k

5 个回答

得票最新

Scor

163

发布于
2019-12-26

✓ 已被采纳

通过官方的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  
}  
  \],  
},  
)

实现效果了！如下↓

router.config配置中没有editor配置哦
~~~~