Ant Design Pro 动态菜单

最新推荐文章于 2025-03-02 05:00:52 发布

置顶荣轩浩

最新推荐文章于 2025-03-02 05:00:52 发布

阅读量2w

点赞数 7

本文链接：https://blog.youkuaiyun.com/a1_a1_a/article/details/82713492

版权

动态菜单同时被 2 个专栏收录

1 篇文章

订阅专栏

Ant Design Pro

0 篇文章

订阅专栏

本文详细介绍如何在AntDesignPro中实现动态菜单配置，包括修改router.config.js，整合menuData，以及通过model获取动态路由参数的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在刚接触Ant Design Pro时发现，它的路由是由router.config.js文件来配置的，所以它是静态的，但是我们的实际项目中可能存在着需要动态配置路由的情况，我们就来写一下动态菜单。如下是官网给出的动态菜单的方法，非常简单的一句话。

步骤：

1：config/router.config.js：需要配置所有页面的路由参数；

2：src/layouts/BasicLayout.js：

链接model与获取到menuData数据

在获取面包屑映射的时候配置state数据

在render中获取到menuData的数据

3：src/models/menuTree.js代码如下：

import { queryMenu } from '@/services/menuTree';

export default {
  namespace: 'menuTree',

  state: {
    menuData: [],
  },

  effects: {
    *getMenu(_, { call, put }) {
      const response = yield call(queryMenu);
      yield put({
        type: 'menuResult',
        payload: response,
      });
    },
  },

  reducers: {
    menuResult(state, action) {
      return {
        ...state,
        menuData: action.payload,
      };
    },
  },
};

4：src/services/menuTree.js代码如下

import request from '@/utils/request';

export async function queryMenu() {
  return request('/menu/getMenuTree');
}

5：mock/Menu.js中配置你所需要的路由参数，这边就是配置所需要显示的动态路由，实际项目中就要使用真实的路由参数，这边仅作测试使用！

我这边仅显示部分代码。

6：src/locales/zh-CN.js与src/locales/en-US.js中配置相应路由的显示名称！

以上就是Ant Design Pro 动态菜单的所有步骤，具体我就不再描述了。

代码我已经上传到csdn：

地址：https://download.youkuaiyun.com/download/a1_a1_a/10707053

不足之处请大家多多理解与赐教！