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:'子菜单',
}

目录
打赏
0
0
0
0
1
分享
相关文章
ant design pro 更改表格自带的分页
ant design pro 更改表格自带的分页
157 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1403 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
793 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1534 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
ant design一个页面(新增编辑)
ant design一个页面(新增编辑)
79 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
935 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
Ant Design pro删除模块笔记(二)
Ant Design pro删除模块笔记(二)
119 0
hook+ant design实现列表的增加和修改(弹出框)
hook+ant design实现列表的增加和修改(弹出框)
100 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等