Ant Design Pro新增页面步骤

简介: Ant Design Pro新增页面步骤

新增页面步骤


根据页面结构规范创建页面文件后

接着在项目根目录寻找config文件夹下的routes.js中添加该页面项的路由配置

如创建子路由则在父路由下定义routes属性,值为一个数组[],数组中为该路由的子路由路由配置项

如下图:

export default [
  {
    path:'/index',
    name:'index',
    component:'./Index',
    //创建的名为Index文件夹的路由配置
  },
  创建父子菜单
  {
    path:'/user',
    routes:[
      {
        path:'/login',
        name:'login',
        component:'./user/Login',
      }
    ]
  }
]

接着页面就创建好了,但是会发现菜单名称是路由配置中的name的值,要设置菜单名称的话就要去国际化文件中设置了:


首先打开项目根目录下的src/locales,会发现里面有很多的文件夹,这些文件夹对应的是不同种类的语言


例如简体中文、英语等,项目默认设置为简体中文,所以直接去找到zh-CN文件夹,找到menu.js


在其中export default默认导出的对象中设置menu.文件名:‘要设置的菜单名称’

例如:

export default {
  'menu.index': '首页',
}

如果是给子菜单设置菜单名称的话?则需要在子路由的name前加上父菜单的路由name,例如:

export default {
  'menu.index': '父菜单',
  'menu.index.page:'子菜单',
}

相关文章
|
移动开发 缓存 自然语言处理
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1597 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
前端开发 JavaScript Java
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
1168 0
【Ant Design Pro】使用ant design pro做为你的开发模板(完结篇)上线部署项目
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1882 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
API
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
1166 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
|
9月前
|
Java 数据安全/隐私保护 开发者
【潜意识Java】深入理解 Java 面向对象编程(OOP)
本文介绍了Java中的面向对象编程(OOP)核心概念,包括封装、继承、多态和抽象。封装通过访问控制保护数据,提高安全性;继承支持代码复用,减少冗余;多态实现灵活的行为调用;抽象则隐藏细节,简化接口设计。掌握这些概念有助于编写高效、灵活且易于维护的代码。文章通过实例详细讲解了每个概念在Java中的应用,并总结了它们的优势。
356 3
|
9月前
|
安全 Cloud Native Linux
龙蜥社区漏洞管理治理策略与实践
本次分享的主题是龙蜥社区漏洞管理治理策略与实践,由阿里云龙蜥社区漏洞管理的张世乐分享。主要分为四个部分: 1.龙蜥社区 2.龙蜥操作系统 3.针对漏洞的治理策略
167 3
|
前端开发
MVVM框架原理
MVVM框架(Model-View-ViewModel)是一种基于数据绑定的前端架构模式。它将视图逻辑与业务逻辑分离,提供了一种简单而清晰的方式来管理和组织代码。
804 0
|
关系型数据库 MySQL 数据库
MySQL数据库实验三 MySQL查询
MySQL数据库实验三 MySQL查询
672 0
|
运维 API 开发工具
对象存储oss使用问题之获取临时访问凭证报错:It is not a map value.如何解决
《对象存储OSS操作报错合集》精选了用户在使用阿里云对象存储服务(OSS)过程中出现的各种常见及疑难报错情况,包括但不限于权限问题、上传下载异常、Bucket配置错误、网络连接问题、跨域资源共享(CORS)设定错误、数据一致性问题以及API调用失败等场景。为用户降低故障排查时间,确保OSS服务的稳定运行与高效利用。
910 0