Ant-design-pro: ant design pro 2 动态菜单

[xyzabc0004]

我想把ant design pro 2的菜单，路由，权限 做活掉，
网上都找不到什么资料，
还请各位专家指点下，谢谢了！

[xiaohuoni]

菜单可以修改 src/models/menu.js
路由我尝试了几种方式，好像都还不行，方案待定吧。
权限可以参考 https://github.com/ant-design/ant-design-pro/pull/2928
后续官网的文档上会体现。

[xyzabc0004]

后续官网上会有更新这一部分？！ @xiaohuoni

[xiaohuoni]

肯定会的吧，问的人这么多

[xyzabc0004]

真希望如此！ @xiaohuoni

[chenshuai2144]

@xiaohuoni 是时候写个文档了

[a854363956]

关于Ant design Pro 2的动态菜单,可以参考这几个文件router.config和menu.js里面的getMenuData来进行过滤生成最终的菜单信息. 其路由信息,是由umi来进行配置的,在文件config.js里面

  // 路由配置
  routes: pageRoutes,

路由指的是界面上的URL地址,对应不同的组件,这个就是路由
菜单指的就是左边生成的菜单信息,一般点击菜单后会连接到指定的路由,目前好像动态路由不太好实现,动态菜单就很简单了,参看SiderMenu组件的menuData参数就行了,在BasicLayout.js里面配置SiderMenu组件的menuData参数为后台请求即可

其实菜单的生成主要是SiderMenu组件的里面的menuData这个参数关注这个就行.目前ant design pro 2的流程大概就是这样

https://www.yuque.com/zhangjin-frt3c/tigfst/rz0e9m 可以参看这个链接,我自己写的备注说明

[a854363956]

菜单可以修改 src/models/menu.js
路由我尝试了几种方式，好像都还不行，方案待定吧。
权限可以参考 #2928
后续官网的文档上会体现。

其实我感觉他们关注的动态菜单,而不是动态路由,动态路由放在后台个人感觉意义不大. - - !!

[luzhongchang]

按照上面的说法，其实本地都要配置好路由然后在menu中配置是否显示吧，我这边有这么一个需求，就是menu 全部是指向同一个component只是参数不同 ，然后我配置好了，当点击menu的时候 路由参数是变了 但是页面还是原来的那个页面，没有动，有什么办法可以解决 点击menu后 重新刷新页面

[a854363956]

按照上面的说法，其实本地都要配置好路由然后在menu中配置是否显示吧，我这边有这么一个需求，就是menu 全部是指向同一个component只是参数不同 ，然后我配置好了，当点击menu的时候 路由参数是变了 但是页面还是原来的那个页面，没有动，有什么办法可以解决 点击menu后 重新刷新页面

可以的,在页面中获取当前URL的参数,如果发现不对就重新刷新页面,目前想到的解决方案,但是不够优雅

[xiaomai7758]

菜单用了dva的model,但SiderMenu组件中还是用的React.memo(对这个不了解)
这样导致我在model.menu中修改menuData的数据不会实时生效,得点一下折叠菜单才可以.
我把React.memo改成React.Component了,这样比较好.(补充,我加route菜单变化了,但路由没挂上,是404)

model/menu.js 加两行

// 1.顶部引入
import { getFlatMenuKeys } from '@/components/SiderMenu/SiderMenuUtils';
// 2.reducers中 
save(state, action) {
      // 这里加一行处理
      state.tree = getFlatMenuKeys(action.payload.menuData);
      return {
        ...state,
        ...action.payload,
      };
    },

src/components/SiderMenu/index.js

import React from 'react';
import { Drawer } from 'antd';
import SiderMenu from './SiderMenu';
import { getFlatMenuKeys } from './SiderMenuUtils';
import { connect } from 'dva';

// const SiderMenuWrapper = React.memo(props => {
//   const { isMobile, menuData, collapsed, onCollapse } = props;
//   const flatMenuKeys = getFlatMenuKeys(menuData);
//   return isMobile ? (
//     <Drawer
//       visible={!collapsed}
//       placement="left"
//       onClose={() => onCollapse(true)}
//       style={{
//         padding: 0,
//         height: '100vh',
//       }}
//     >
//       <SiderMenu {...props} flatMenuKeys={flatMenuKeys} collapsed={isMobile ? false : collapsed} />
//     </Drawer>
//   ) : (
//     <SiderMenu {...props} flatMenuKeys={flatMenuKeys} />
//   );
// });

@connect(({ menu }) => ({ menu }))
class SiderMenuWrapper extends React.Component {
  render() {
    return this.props.isMobile ? (
      <Drawer
        visible={!this.props.collapsed}
        placement="left"
        onClose={() => this.props.onCollapse(true)}
        style={{
          padding: 0,
          height: '100vh',
        }}
      >
        <SiderMenu {...this.props} flatMenuKeys={this.props.menu.tree} collapsed={this.props.isMobile ? false : this.props.collapsed} />
      </Drawer>
    ) : (
        <SiderMenu {...this.props} flatMenuKeys={this.props.menu.tree} />
      );
  }
}

export default SiderMenuWrapper;

[xiaomai7758]

按照上面的说法，其实本地都要配置好路由然后在menu中配置是否显示吧，我这边有这么一个需求，就是menu 全部是指向同一个component只是参数不同 ，然后我配置好了，当点击menu的时候 路由参数是变了 但是页面还是原来的那个页面，没有动，有什么办法可以解决 点击menu后 重新刷新页面

可以的,在页面中获取当前URL的参数,如果发现不对就重新刷新页面,目前想到的解决方案,但是不够优雅

子菜单是同一组件,我加的route都是404...

[a854363956]

按照上面的说法，其实本地都要配置好路由然后在menu中配置是否显示吧，我这边有这么一个需求，就是menu 全部是指向同一个component只是参数不同 ，然后我配置好了，当点击menu的时候 路由参数是变了 但是页面还是原来的那个页面，没有动，有什么办法可以解决 点击menu后 重新刷新页面

可以的,在页面中获取当前URL的参数,如果发现不对就重新刷新页面,目前想到的解决方案,但是不够优雅

子菜单是同一组件,我加的route都是404...

404 表示你没有注册对应的route,你检查你的route.config

[kzabc]

@xiaohuoni 不知道各位大佬是否有了解决方案

[xiaohuoni]

@kzabc 你说的是啥？

[xiaohuoni]

https://github.com/ant-design/ant-design-pro-site/pull/264