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

pro.antd.design的更多相关文章

  1. 关于react中antd design pro下面src/models

    1.src/models 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: 1.UI 组件交互操作: 2.调用 model 的 effect: 3.调用统一管 ...

  2. 记录学习antd design pro dva的过程,主要记错, 多图预警,如有理解偏差,忘指出,多谢!

    首要问题: 如何增加菜单项 答案: 在router.config中添加路由,在locales语言国际化增加选项 问题1: 答案1: 问题2: 这个要修改state,正确写法 存在的疑惑:为什么不能直接 ...

  3. webpack热更新问题和antd design字体图标库扩展

    标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...

  4. antd design vue 设置 v-decorator 的初始值

    v-decorator="['openType', { initialValue:'1' }]" 效果:

  5. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  6. ant design pro (十三)advanced 错误处理

    一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...

  7. ant design pro (十)advanced 图表

    一.概述 原文地址:https://pro.ant.design/docs/graph-cn Ant Design Pro 提供了由设计师精心设计抽象的图表类型,是在 BizCharts 图表库基础上 ...

  8. ant design pro (九)引入外部模块

    一.概述 原文地址:https://pro.ant.design/docs/import-cn 除了 antd 组件以及脚手架内置的业务组件,有时我们还需要引入其他外部模块,这里以引入富文本组件 re ...

  9. ant design pro (八)构建和发布

    一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...

随机推荐

  1. 打开KVM Console的一些注意事项

    今天早上跟思科CIMC里的KVM console较劲了很久,终于成功的打开了KVM console. 总结了下面的一些注意事项.如果你也遇到了KVM console打不开,那么可以尝试一下. 我不想花 ...

  2. 使用Mybatis时mybatis-config.xml配置中"configuration" 的内容必须匹配 (.....)解决方案

    一.简述 使用Mybatis配置mybatis-config配置文件时,经常遇到下列报错信息:org.xml.sax.SAXParseException; lineNumber: 36; column ...

  3. 每天一个linux命令:df

    1.命令简介 df (disk free) 其功能显示每个文件所在的文件系统的信息,默认是显示所有文件系统. 2.用法 df [选项]... [文件]... 3.选项   4.示例 示例1:显示磁盘使 ...

  4. python3 “POST data should be bytes or an iterable of bytes...”的解决方法

    urllib.parse.urlencode({}).encode(encoding='utf8') 参考了:dushu990

  5. mysql数据类型转换

    --CAST(xxx AS 类型) --CONVERT(xxx,类型) --#浮点型转化为int --i='3.35' --cast(i as signed) --cast(sum(money/100 ...

  6. [转]你可能不知道的五个强大HTML5 API

    一.全屏 // 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.re ...

  7. DES算法原理完整版

    1.所需参数 key:8个字节共64位的工作密钥 data:8个字节共64位的需要被加密或被解密的数据 mode:DES工作方式,加密或者解密 2.初始置换 DES算法使用64位的密钥key将64位的 ...

  8. MYSQL单表可以存储多少条数据???

    MYSQL单表可以存储多少条数据??? 单表存储四千万条数据,说MySQL不行的自己打脸吧. 多说一句话,对于爬虫来说,任何数据库,仅仅是存储数据的地方,最关心的是 能否存储数据和存储多少数据以及存储 ...

  9. LVS简介与使用

    一.LVS是什么? LVS的英文全称是Linux Virtual Server,即Linux虚拟服务器.它是我们国家的章文嵩博士的一个开源项目.在linux内存2.6中,它已经成为内核的一部分,在此之 ...

  10. WCF-Oracel适配器针对UDT的使用配置与注意事项

    配置方法 1.针对Oracle UDT 的数据类型需要在开发过程中手动配置生成的DLL位置和Key位置,Visual Studio->添加生成项目->Add Adapter Metadat ...