「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

Umi 从服务端请求菜单

组件/框架：umi、antd、@antd/pro-layout

背景：老板想做的动态一些、不想把菜单写死在前端，结果我因为没搞懂路由和菜单的概念、白白浪费了好长时间、借着这个机会，正好总结下。

核心概念

从视图与业务来划分：「菜单」属于视图，「路由」属于业务。

菜单

映射菜单到href，相当于html中的a标签，

用户能够看到的部分，Umi中，使用@umijs/plugin-layout后，默认通过路由配置自动生成。

这也让一些新手（我）刚用Umi的时候、感觉Amazing（这也太简单了吧、直接config配置一下、菜单、路由就都出来了(;゛゜'ω゜')）。

路由

映射href到Component。 Umi中支持两种路由方式、约定路由与配置路由。且都可以通过路由自动生成菜单。路由是必须的，且有了路由、菜单才有意义。

从服务端请求菜单

通过使用@antd/pro-layout暴露的方法、与Umi的封装，可以很简单的从服务端获取菜单。

antd/pro-layout暴露的方法

在官方文档上有给出示例，主要是传递menu属性给Prolayout组件。

Umi的封装

Umi中，封装了app.ts文件,可以在这个文件中调用「antd/prolayout」暴露的方法，从而使用服务端菜单。

关键步骤

在.umirc.ts中配置「路由」（routes）与layout。

// .umirc.ts
defineConfig({
  // other
layout:{},
routes: [
    { path: '/', name:"首页",component: '@/pages/index',icon:"smile" },
    { path: '/page1', name:"菜单1",component: '@/pages/index', icon:"heart" },
    { path: '/page2', name:"菜单2",component: '@/pages/index' ,icon:'smile',routes:[
      { path: '/page2/sec1', name:"二级菜单",component: '@/pages/index', icon:"heart" },
    ]},
  ],
  // other
})

在src/app.ts中导出layout函数。

// src/app.ts
export const layout = () => {
  return {
    menu: {
      request: async () => {
        const menuData = await getMenus();
        return menuData;
      },
    },
  };
};

在mock文件夹下编写mock函数模拟后端接口。

// mock/menu.ts
function getMenus(req, res) {
  res.json([
    { path: '/', name: '首页',icon:"smile" },
    { path: '/page1', name: '菜单11',icon:"smile" },
    { path: '/page2', name: '菜单22',icon:"smile",routes:[
        {
            path:'/page2/sec1',name:"二级菜单",icon:"smile"
        }
    ] },
  ]);
}


export default {
  'GET /api/menus': getMenus,
};

github完整示例