antd-design-pro使用操作

基本结构

** 脚手架通过结合一些配置文件、基本算法及工具函数,搭建好了路由和菜单的基本框架,主要涉及以下几个模块/功能:**

  1. 路由管理 通过约定的语法根据在 router.config.js 中配置路由。
  2. 菜单生成 根据路由配置来生成菜单。菜单项名称,嵌套路径与路由高度耦合。
  3. 面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。

路由

目前脚手架中所有的路由都通过 router.config.js 来统一管理,在 umi 的配置中我们增加了一些参数,如 name,icon,hideChildrenInMenu,authority,来辅助生成菜单。其中:

  1. name 和 icon分别代表生成菜单项的文本和图标。
  2. hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 分步表单 的配置。
  3. hideInMenu 可以在菜单中不展示这个路由,包括子路由。效果可以查看 exception/trigger页面。
  4. authority用来配置这个路由的权限,如果配置了将会验证当前用户的权限,并决定是否展示。

菜单

  1. 菜单根据 router.config.js 生成,具体逻辑在 src/models/menu.js 中的 formatter 方法实现。
  2. 如果你的项目并不需要菜单,你可以直接在 BasicLayout 中删除 SiderMenu 组件的挂载。
    
  3. 并在 src/layouts/BasicLayout 中 设置 const MenuData = []。
  4. 如果你需要从服务器请求菜单,可以将如果你需要从服务器请求菜单,可以将menuData 设置为 state,然后通过网络获取动态修改 state。

面包屑

面包屑由 PageHeaderWrapper 实现,MenuContext 将 根据 MenuData 生成的 breadcrumbNameMap 通过 props 传递给了 PageHeader,如果你要做自定义的面包屑,可以通过修改传入的 breadcrumbNameMap 来解决。
breadcrumbNameMap 示例数据如下:
{
‘/’: { path: ‘/’, redirect: ‘/dashboard/analysis’, locale: ‘menu’ },
‘/dashboard/analysis’: {
name: ‘analysis’,
component: ‘./Dashboard/Analysis’,
locale: ‘menu.dashboard.analysis’,
},

}

=== 示例===

1.菜单跳转

{
    path: 'https://pro.ant.design/docs/getting-started-cn',
    target: '_blank', // 点击新窗口打开
    name: "文档",
}

2.新增页面

脚手架默认提供了两种布局模板:基础布局 - BasicLayout 以及 账户相关布局 - UserLayout:如果使用这种,很简单,如下:
// app
{
path: ‘/’,
component: ‘…/layouts/BasicLayout’,
routes: [
// dashboard
{ path: ‘/’, redirect: ‘/dashboard/analysis’ },
{ path :’/dashboard/test’,component:"./Dashboard/Test"},

},
会自动生成相关的路由及导航

你可能感兴趣的:(node.js,antd)