pro.antd.design

有关react的ui组建antd.design新推出的pro版本，最近用到了路由方面。

common与routes;

首先需要在menu.js里面配置：

{

name: '精品',

icon: 'dashboard',

path: 'finequality',

children: [

{

name: '精品vue',

path: 'finevue',

},

{

name: '精品react',

path: 'finereact',

},

{

name: '精品angular',

path: 'fineangular',

// hideInBreadcrumb: true,

// hideInMenu: true,

},

],

},

{

name: '首页',

icon: 'dashboard',

path: 'homepage',

children: [

{

name: '首页1',

path: 'onepage',

},

],

},

{

name: '任务管理',

icon: 'dashboard',

path: 'task',

children: [

{

name: '任务1',

path: 'administration_1',

},

{

name: '任务2',

path: 'administration_2',

},

],

},

{

name: '数据管理',

icon: 'dashboard',

path: 'data',

children: [

{

name: '数据管理1',

path: 'administration_1',

},

{

name: '数据管理2',

path: 'administration_2',

},

],

},

{

name: '模板管理',

icon: 'dashboard',

path: 'template',

children: [

{

name: '数据管理1',

path: 'administration_1',

},

{

name: '数据管理2',

path: 'administration_2',

},

],

},

{

name: '数据源管理',

icon: 'dashboard',

path: 'datasource',

children: [

{

name: '数据管理1',

path: 'administration_1',

},

{

name: '数据管理2',

path: 'administration_2',

},

],

},

{

name: '服务器管理',

icon: 'dashboard',

path: 'theserver',

children: [

{

name: '数据管理1',

path: 'administration_1',

},

{

name: '数据管理2',

path: 'administration_2',

},

],

},

{

name: '报警管理',

icon: 'dashboard',

path: 'callpol',

children: [

{

name: '报警管理1',

path: 'administration_1',

},

{

name: '报警管理2',

path: 'administration_2',

},

],

},

{

name: 'IP地址池管理',

icon: 'dashboard',

path: 'addressip',

children: [

{

name: 'IP地址池管理1',

path: 'administration_1',

},

{

name: 'IP地址池管理2',

path: 'administration_2',

},

],

},

{

name: '日志管理',

icon: 'dashboard',

path: 'journal',

children: [

{

name: 'IP地址池管理1',

path: 'administration_1',

},

{

name: 'IP地址池管理2',

path: 'administration_2',

},

],

},

{

name: '角色管理',

icon: 'dashboard',

path: 'role',

children: [

{

name: '角色管理1',

path: 'administration_1',

},

{

name: '角色管理2',

path: 'administration_2',

},

],

},

{

name: '用户管理',

icon: 'dashboard',

path: 'userp',

children: [

{

name: '用户管理1',

path: 'administration_1',

},

{

name: '用户管理2',

path: 'administration_2',

},

],

},

其次在routes配置：

'/homepage/onepage':{

component: dynamicWrapper(app, [], () => import('../routes/Homepage/Homepagei')),//首页

},

'/task/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Task/Index')),//任务管理1

},

'/task/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Task/Subpage')),//任务管理2

},

'/data/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Data/Dataindex')),//数据管理1

},

'/data/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Data/Datasubpage')),//数据管理2

},

'/template/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Template/Templateindex')),//模板管理1

},

'/template/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Template/Templatesubpage')),//模板管理2

},

'/datasource/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Datasource/Datasourcei')),//数据源管理1(i表示index)

},

'/datasource/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Datasource/Datasources')),//数据源管理2(s表示subpage)

},

'/theserver/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Theserver/Theserveri')),//服务器管理1(i表示index)

},

'/theserver/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Theserver/Theservers')),//服务器管理2(s表示subpage)

},

'/callpol/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Callpol/Callpoli')),//报警管理1(i表示index)

},

'/callpol/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Callpol/Callpols')),//报警管理2(s表示subpage)

},

'/addressip/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Addressip/Addressi')),//IP地址池管理1(i表示index)

},

'/addressip/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Addressip/Addresss')),//IP地址池管理2(s表示subpage)

},

'/journal/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Journal/Journali')),//IP地址池管理1(i表示index)

},

'/journal/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Journal/Journals')),//IP地址池管理2(s表示subpage)

},

'/role/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Role/Rolei')),//IP地址池管理1(i表示index)

},

'/role/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Role/Roles')),//IP地址池管理2(s表示subpage)

},

'/userp/administration_1':{

component: dynamicWrapper(app, [], () => import('../routes/Userp/Userpi')),//IP地址池管理1(i表示index)

},

'/userp/administration_2':{

component: dynamicWrapper(app, [], () => import('../routes/Userp/Userps')),//IP地址池管理2(s表示subpage)

},

最后跟句路径创建文件夹写出对应的js文件：举个例子比如，

在routes文件夹下面创建Userp文件夹，在下面创造两个js文件：Userpi.js,Userps.js。

在此需要注意：Userp/Userps文件夹大写，js文件大写，其余路由与path都按小写。根据pro例子来