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

news2024/12/23 9:48:59

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 的地址