ant design pro 路由

参数简介

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

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

// 简单路由菜单展示
  {
    path: '/user',
    component: '../layouts/UserLayout',
    routes: [
      { path: '/user', redirect: '/user/login' },
      { path: '/user/login', name: 'login', component: './User/Login' },
      { path: '/user/register', name: 'register', component: './User/Register' },
      {
        path: '/user/register-result',
        name: 'register.result',
        component: './User/RegisterResult',
      },
      {
        component: '404',
      },
    ],
  }

从服务器请求菜单

菜单根据 router.config.js 生成，具体逻辑在 src/models/menu.js 中的 formatter 方法实现。

只需在 models/menu 中发起 http 请求，menuData 是一个 json 数组。只需服务器返回类似格式的 json 即可。

[
  {
    "name": "系统管理",
    "icon": "appstore",
    "path": "/system",
    "authority": [
      "admin"
    ],
    "locale": "menu.system",
    "children": [
      {
        "path": "/system/menu-manager",
        "name": "菜单管理",
        "exact": true,
        "locale": "menu.system.menu-manager",
        "authority": [
          "admin"
        ]
      },
      {
        "path": "/system/role-manager",
        "name": "角色管理",
        "exact": true,
        "locale": "menu.system.role-manager",
        "authority": [
          "admin"
        ]
      },
      {
        "path": "/system/user-manager",
        "name": "用户管理",
        "exact": true,
        "locale": "menu.system.user-manager",
        "authority": [
          "admin"
        ]
      }
    ]
  },
  ...
]

通过js跳转路由

import router from 'umi/router';

router.push('/dashboard/anyParams');

//or

import Link from 'umi/link';

<Link to="/dashboard/anyParams">go</Link>;

在路由组件中，可以通过this.props.match.params 来获得路由参数。