通过官方的umi demo能知道动态添加路由是通过app.js下添加patchRoutes实现的,但是antd v2不仅要实现动态路由还要添加basicLayout布局。查看umi编译源码可以发现是通过dynamic方法实现的,所以参照源码:
动态路由要配合动态菜单,动态添加菜单就不写了,直接改models/menu下的menuData即可,网上都有demo
/**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,
我们自己的代码:
/***app.js***/
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
}
],
},
)
实现效果了!如下↓
3084846423-5e048410206a5_articlex.png
router.config配置中没有editor配置哦
932514268-5e04846365a74_articlex.png