menu.js

/**
 * 定义sidebar和header中的菜单项
 *
 * 一些约定:
 * 1.菜单最多3层;
 * 2.只有"叶子"节点才能跳转;
 * 3.所有的key都不能重复;
 */

// 其实理论上可以嵌套更多层菜单的, 但是我觉得超过3层就不好看了
// 可用的图标见这里: https://ant.design/components/icon-cn/

// 定义siderbar菜单
const sidebarMenu = [
  {
    key: 'index',  // route时url中的值
    name: '菜单哈哈哈',  // 在菜单中显示的名称
    icon: 'smile',  // 图标是可选的
    child: [
      {
        key: 'option1',
        name: '模拟CRUD',
        icon: 'play-circle',   // 二级三级菜单也可以带图标
      },
      {
        key: 'option2',
        name: '图片DEMO',
        icon: 'android',
      },
      {
        key: 'option3',
        name: '自定义操作',
        icon: 'bulb',
      },
    ],
  },
  {
    key: 'alone',
    name: '我没有子菜单',
    icon: 'clock-circle',
  },
  {
    key: 'alone2',
    name: '我没有图标',
  },
  {
    key: 'noiconhaha',
    name: '又一个没图标的',
    child: [
      {
        key: 'nesnesnes',
        name: 'N64',
      },
    ],
  },
  {
    key: 'daohang',
    name: '导航',
    icon: 'appstore',
    child: [
      {
        key: '555',
        name: '选项5',
      },
      {
        key: 'sanji',  // 最多只能到三级导航
        name: '三级导航',
        icon: 'laptop',
        child: [
          {
            key: '666',
            name: '选项6',
            icon: 'check',
          },
          {
            key: '777',
            name: '选项7',
            icon: 'close',
          },
          {
            key: '888',
            name: '选项8',
          },
          {
            key: '999',
            name: '选项9',
          },
        ],
      },
    ],
  },
  {
    key: 'test',
    name: '测试',
    icon: 'eye',
    child: [
      {
        key: 'aaa',
        name: '选项a',
      },
      {
        key: 'bbb',
        name: '选项b',
        icon: 'pause',
      },
      {
        key: 'ccc',
        name: '选项c',
      },
      {
        key: 'sanjiaaa',  // 最多只能到三级导航
        name: '三级导航aaa',
        child: [
          {
            key: '666aa',
            name: '选项6',
            icon: 'meh',
          },
        ],
      },
      {
        key: 'sanjibbb',  // 最多只能到三级导航
        name: '三级导航bbb',
        child: [
          {
            key: '666bb',
            name: '选项6',
          },
        ],
      },
    ],
  },
];

export default sidebarMenu;

// 定义header菜单, 格式和sidebar是一样的
// 特殊的地方在于, 我规定header的最右侧必须是用户相关操作的菜单, 所以定义了一个特殊的key
// 另外注意这个菜单定义的顺序是从右向左的, 因为样式是float:right
export const headerMenu = [
  {
    // 一个特殊的key, 定义用户菜单, 在这个submenu下面设置icon/name不会生效
    key: 'userMenu',
    child: [
      {
        key: 'modifyUser',
        name: '修改用户信息',
        icon: 'bulb',
        // 对于headerMenu的菜单项, 可以让它跳到外部地址, 如果设置了url属性, 就会打开一个新窗口
        // 如果不设置url属性, 行为和sidebarMenu是一样的, 激活特定的组件, 注意在index.js中配置好路由, 否则会404
        url: 'http://jxy.me',
      },
      {
        key: 'user222',
        name: '药药切克闹',
        icon: 'rocket',
      },
      {
        key: 'user333',
        name: '选项3',
        child: [
          {
            key: 'user333aaa',
            name: 'user333aaa',
            icon: 'windows',
          },
          {
            key: 'user333bbb',
            name: 'user333bbb',
            url: 'http://jxy.me',
          },
        ],
      },
    ],
  },
  {
    key: 'headerMenu2',
    name: 'header菜单',
    icon: 'team',
    child: [
      {
        key: 'headerMenu111',
        name: '菜单项1',
        icon: 'windows',
        url: 'http://jxy.me',
      },
      {
        key: '菜单项2',
        name: '短信表管理',
        url: 'http://jxy.me',
      },
      {
        key: '菜单项3',
        name: '选项3',
        icon: 'chrome',
        url: 'http://jxy.me',
      },
    ],
  },
  {
    key: 'headerMenu3',
    name: '我没有子菜单',
    icon: 'setting',
    url: 'http://jxy.me',
  },
  {
    key: 'headerMenu4',
    name: '我也没有子菜单',
    icon: 'shopping-cart',
  },
  {
    key: 'headerMenu5',
    name: '我没有图标',
    child: [
      {
        key: 'headerMenu5000000',
        name: '二级导航无子菜单',
      },
      {
        key: 'headerMenu51111',
        name: '三级导航',
        icon: 'laptop',
        child: [
          {
            key: 'headerMenu51111aa',
            name: '选项6',
            icon: 'meh',
          },
          {
            key: 'headerMenu51111bb',
            name: '选项7',
            icon: 'inbox',
          },
        ],
      },
      {
        key: 'headerMenu52222',
        name: '三级导航无图标',
        child: [
          {
            key: 'headerMenu52222aa',
            name: '选项8',
          },
          {
            key: 'headerMenu52222bb',
            name: '选项9',
          },
        ],
      },
    ],
  },
];