umi pro-layout : 某个页面 禁用/移除 pro-layout ( 比如: 登录页不需要 layout )

umi 官方 issues 地址: github

代码

umi 开启 layout 后, 会把所有页面都放在 pro layout 中.
但是 登录页 或 其他一些页面 是不需要这个 layout 的.
可以通过菜单中的 layout:false 属性关闭这个当前路由的 layout
例子:

// IUmiRoute 是自己写的 ts 类型,方便输入. 代码在本文末尾
let router: IUmiRoute[] = [
    {
        name: '登录',
        path: '/login', 
        component: "./Login",
        layout:false,
    }
    // 其他的省略 
]
export default router;

截图

自己的版本号和配置

"dependencies": {
  "@ant-design/icons": "^4.7.0",
  "@ant-design/pro-layout": "^7.1.9",
  "@umijs/max": "^4.0.26",
  "antd": "^4.23.6",
},

umi 的配置

import { defineConfig } from '@umijs/max';
import router from './router'; // 这个就是文章开头的那个代码

export default defineConfig({
 	// .... 其他配置省略.

    // 集成 antd
    antd: {},

    // 集成 ProLayout
    layout: {
        title: '@umijs/max',
    },

    // 路由
    routes: router
});

附赠一个路由的 TypeScript 类型

可能不全, 具体的可以看官方的文档… 自己再补一些.

/**
 * 一些路由 hook : https://umijs.org/docs/guides/routes#%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E5%8F%82%E6%95%B0
 * 
 * 数据来源:
 *  https://procomponents.ant.design/components/layout/#%E5%92%8C-umi-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8
 *  https://beta-pro.ant.design/docs/advanced-menu-cn
 *  https://umijs.org/docs/max/layout-menu#%E6%89%A9%E5%B1%95%E7%9A%84%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE
 *  https://pro.ant.design/zh-CN/docs/layout/#%E8%8F%9C%E5%8D%95%E5%B1%95%E7%A4%BA
 * 可能有遗漏, 更多的类型可以到 pro-layout 中查询
 */
export interface IUmiRoute {
    /** 
     * 地址栏路由 
     * 
     * @example
     * /groups
     * /groups/admin
     * /users/:id
     * /users/:id/messages
     * /files/*
     * /files/:id/*
     *  */
    path?: string
    /** 组件路径 , ("./"相对路径会从 pages 找起, 可以用 "@" 或 "../" 开头, 从 src 开始找  ) */
    component?: string
    /** 菜单的名字 */
    name?: string
    /** 图标 */
    icon?: string
    /** 指定外链打开形式，同a标签 */
    target?: string | '_blank'
    /** 移除 顶栏 */
    headerRender?: false
    /** 移除 页脚 */
    footerRender?: false
    /** 移除 菜单 */
    menuRender?: false
    /** 移除 菜单顶栏 (不显示菜单的 title 和 logo)*/
    menuHeaderRender?: false
    /** 权限配置，需要与 plugin-access 插件配合使用 (eg ?: canRead)*/
    access?: string
    /** 隐藏子菜单 */
    hideChildrenInMenu?: true
    /** 隐藏自己和子菜单 */
    hideInMenu?: true
    /** 在面包屑中隐藏 */
    hideInBreadcrumb?: true

    /** 隐藏自己，并且将子节点提升到与自己平级, */
    flatMenu?: true,

    /** 跳转到一个路由 */
    redirect?: string

    /** 组件的包装组件 (https://umijs.org/docs/guides/routes#wrappers) */
    wrappers?: string[]

    /** 路由的标题 */
    title?: string
    //

    /** 当此节点被选中的时候也会选中 parentKeys 的节点 */
    parentKeys?: string[]

    /** pro子菜单 */
    // children?: IUmiRoute[]
    /** umi子菜单 */
    routes?: IUmiRoute[]

    /** 自定义菜单的国际化 key */
    locale?: string | false

    /** 用于标定选中的值，默认是 path */
    key?: string

    /** 移除 layout (eg: 登录页 等等) */
    layout?:false

    // 更多
    [key: string]: any
}