umi-plugin-menus
routes to menus
将 umi
生成的 routes
转换成 tree
结构 [menus|routes].json
数据,开发中可直接引入该文件来进行导航菜单的生成
PS: routes
更新时 [menus|routes].json
文件也会实时更新
Usage
配置参考
in .umirc.js
And config/config.js
,
1、单独使用
.umirc.js (此方法不会进行umi-plugin-routes
的exclude
规则过滤)
; plugins: 'umi-plugin-menus' build:
2、配合umi-plugin-routes
或umi-plugin-react
.umirc.js
;; plugins: 'umi-plugin-react' antd: true dva: true dynamicImport: webpackChunkName: true title: 'visual' dll: false routes: exclude: /models\// /services\// /utils\// /model\.sx?$/ /service\.sx?$/ /util\.sx?$/ /components\// { ; return routes; }
其他文件参考
src/pages/first/index.js
/** * title: 首页 // 菜单名称 * order: 1 // 菜单排序 * hideMenu: true // 隐藏菜单(菜单组件实现) * hideChildMenu: true // 隐藏子菜单(菜单组件实现) */; { return <div>first page</div>};
src/layouts/index.js
;; ;;;;;;;;;;;; ; const Content Sider = Layout; const menus = ; /** * 递归生成菜单 * @param * @param * @param * @param * @returns */ { const key: parentKey = ''} = parent; return ;} { const collapsed setCollapsed = ; const openKeys setOpenKeys = ; const selectedKeys setSelectedKeys = ; const menuItems setMenuItems = ; const menuItemsComponent setMenuItemsComponent = ; const location: pathname = ''} = {}} = props; ; ; return <Layout style=height: '100vh'> <Sider collapsible collapsed=collapsed onCollapse= > <Menu theme='dark' openKeys=openKeys selectedKeys=selectedKeys mode='inline' onOpenChange=setOpenKeys> menuItemsComponent </Menu> </Sider> <Layout> <Content> <div style=width: '100vw' height: '100vh'> propschildren </div> </Content> </Layout> </Layout> ;} ;
Options
declare /** * @param * @param * @param {[[string], [string]]} [order=[['order'], ['asc']]] - 根据字段排序 参考 lodash/orderBy */
LICENSE
MIT