首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

DESIGN_pro.antd.design

作者：Because_of_you龙 | 来源：互联网 | 2023-09-23 19:26
有关react的ui组建antd.design新推出的pro版本，最近用到了路由方面。common与routes;首先需要在menu.js里

有关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例子来



推荐阅读
author-avatar
Because_of_you龙
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有