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 更改表格自带的分页
125 0
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1254 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
开发工具 git
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
712 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1359 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
前端开发
ant design一个页面(新增编辑)
ant design一个页面(新增编辑)
67 0
|
API
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
814 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
|
12月前
Ant Design pro删除模块笔记(二)
Ant Design pro删除模块笔记(二)
83 0
|
前端开发 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板 OpenAPI,快速管理你的请求接口。
前言 >转载好文,作者:[赵小左](https://blog.csdn.net/qq_31281245/article/details/126783707)
【Ant Design Pro】使用ant design pro做为你的开发模板 OpenAPI,快速管理你的请求接口。
|
前端开发
ant design table中增加按钮的两种方式
ant design table中增加按钮的两种方式
225 0