Ant Design Pro 前端脚手架 配置混合导航

Ant Design Pro脚手架 点击查看阅读

混合导航：

顶部导航和侧边栏导航实现联动效果，点击不同的顶部导航按钮会显示对应的子菜单项。

 实现点：

1. 路由的配置

菜单展示

我们可以在 route 中进行 menu 相关配置，来决定当前路由是否会被渲染在菜单中。详细配置说明

• 当不需要在菜单中展示时，可以在路由上配置 hideInMenu 或者删除 menu 相关的配置；

• 当不需要展示 children 时，可以在路由上配置 hideChildrenInMenu；

• 当不需要展示自己，只展示 children，可以在路由上配置 flatMenu；

• 如果没有配置 menu，没有配置 name 的话，则该路由不会在侧边栏中出现。

嵌套布局

有时我们的页面可能会有一些全局的通用的处理逻辑或者 UI，会希望在页面加载前完成，通常会希望可以在内置布局内部再包一层 layout 来完成需求。

// config/routes.ts
export default [{path: '/',menu: {flatMenu: true, //当不需要展示自己，只展示 children，可以在路由上配置 flatMenu；},routes: [{path: '/',redirect: '/operate/user/user-management-outside',},{path: '/operate',name: '运营后台',icon: 'smile',routes: [{path: '/operate',redirect: '/operate/user/user-management-outside',// 路由重定向,解决点击一级菜单页面显示空白的问题},{path: 'user',name: '用户管理',icon: 'icon-yonghuguanli',routes: [{path: 'user-management-outside',name: '企业用户管理',component: './user/management',exact: true,},{path: 'approve',name: '认证审核',component: './approve',access: 'normalRouteFilter'},],},// 继续添加子菜单],},{path: '/nft',name: 'NFT',icon: 'smile',routes: [{path: '/nft',redirect: '/nft/nft-marketing', // 路由重定向,解决点击一级菜单页面显示空白的问题},{path: 'nft-marketing',name: '营销管理',icon: 'icon-yingxiao',component: './nft/nftMarketing/index',exact: true,}],},// 添加顶部导航以及该顶部导航下对应的子菜单]},
];

2. layout的模式

菜单布局展示方式的修改

有时菜单可能需要于顶部显示，左侧显示，或者顶部显示一级菜单，左侧显示二三级菜单。我们可以修改 defaultSettings 中的 layout 的配置来决定菜单的展示方式。

• top 菜单于顶部展示

• side 菜单于左侧展示

• mix 菜单于顶部和左侧混合展示，需要注意，当 mix 模式时，需要添加splitMenus: true，顶部才可以正确展示一级菜单

  

   同时，当使用 mix 模式后，点击一级菜单，并不会直接定位到第一个子级菜单页面，而是会呈现空白页面，需要于配置中设置一下 redirect 的地址

  

   

参考链接：

Pro 的 Layout 组件 - Ant Design Pro

布局 - Ant Design Pro

https://www.cnblogs.com/steamed-twisted-roll/p/15394378.html