创建一个菜单栏

使用npm run "start mock" 启动的项目

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

WARNING

在这里配置相当于服务器从数据查出来的原始数据,并非渲染菜单列表的数据,此中间需要进行数据处理。

import dayjs from "dayjs";
let menu = [
  {
    menu_id: 2,
    title: "详情页",
    path: "/details",
    key: "details",
    parentKey: "",
    icon: "icon_edit",
    order: 1,
    keepAlive: "true",
  },
  {
    menu_id: 1,
    title: "个人中心",
    path: "/person",
    key: "detailsPerson",
    parentKey: "details",
    icon: "icon_infopersonal",
    order: 2,
    keepAlive: "false",
  },
  // .... 开始添加菜单信息 ....
  {
    menu_id: 3, // 菜单id, 必要
    title: "test", // 菜单栏标题,页面title 必要
    path: "/test", // 路由路径信息 必要
    key: "test", // 唯一值,必要
    parentKey: "", // 空表示 为主菜单而非子菜单 必要
    icon: "icon_infopersonal", // 菜单图标 非必要
    order: 3, // 菜单排序 越小越靠前
    keepAlive: "false", // 该页面是否缓存,切换页面时候保存状态
  },
  // .....
];

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

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

TIP

若是 npm run start 启动模式,后台直接返回添加的菜单栏列表即可