Ant Design Pro 動態菜單

在剛接觸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 動態菜單的所有步驟，具體我就不再描述了。