react-ant-admin

Appearance

Return to top
On this page

创建一个菜单栏

若使用请求返回菜单信息的直接向后台添加一条菜单信息即可。

mock 模式

在src/mock/index.js 找到menu变量,往里添加一条菜单信息.代码如下所示

let menu = [
  {
    menu_id: 9,
    [MENU_TITLE]: "列表页",
    [MENU_PATH]: "/list",
    [MENU_KEY]: "list",
    [MENU_PARENTKEY]: "",
    [MENU_ICON]: "icon_list",
    [MENU_KEEPALIVE]: "false",
    order: 1,
  },
  {
    menu_id: 10,
    [MENU_TITLE]: "卡片列表",
    [MENU_PATH]: "/card",
    [MENU_KEY]: "listCard",
    [MENU_PARENTKEY]: "list",
    [MENU_ICON]: "",
    [MENU_KEEPALIVE]: "false",
    order: 5485,
  },
  // .... 开始添加菜单信息 ....
  {
    menu_id: 3, // 菜单id， 必要
    [MENU_TITLE]: "test", // 菜单栏标题，页面title 必要
    [MENU_PATH]: "/test", // 路由路径信息 必要
    [MENU_KEY]: "test", // 唯一值，必要
    [MENU_PARENTKEY]: "", // 空表示 为主菜单而非子菜单 必要
    [MENU_ICON]: "", // 菜单图标 非必要
    order: 3, // 菜单排序 越小越靠前
    [MENU_KEEPALIVE]: "false", // 该页面是否缓存，切换页面时候保存状态
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

由于菜单会走本地会话存储window.sessionStorage,所以保存代码后需要关闭当前窗口,重新打开页面输入地址 http://localhost:3000/react-ant-admin

打开之后,会发现菜单会多出一个test栏目,这样就完成了菜单的添加.

为啥新增了没有显示出来？

因为菜单与权限绑定，如果不是mock模式。正常逻辑是请求接口返回菜单列表。前端只需要根据数据去渲染出该列表的层级关系即可。