umi 官方 issues 地址: github

代碼

umi 開啟 layout 后, 會(huì)把所有頁面都放在 pro layout 中.
但是 登錄頁 或 其他一些頁面 是不需要這個(gè) layout 的.
可以通過菜單中的 layout:false 屬性關(guān)閉這個(gè)當(dāng)前路由的 layout
例子:

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

截圖

自己的版本號(hào)和配置

"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'; // 這個(gè)就是文章開頭的那個(gè)代碼

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

    // 集成 antd
    antd: {},

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

    // 路由
    routes: router
});

附贈(zèng)一個(gè)路由的 TypeScript 類型

可能不全, 具體的可以看官方的文檔… 自己再補(bǔ)一些.

/**
 * 一些路由 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
 * 
 * 數(shù)據(jù)來源:
 *  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
    /** 組件路徑 , ("./"相對(duì)路徑會(huì)從 pages 找起, 可以用 "@" 或 "../" 開頭, 從 src 開始找  ) */
    component?: string
    /** 菜單的名字 */
    name?: string
    /** 圖標(biāo) */
    icon?: string
    /** 指定外鏈打開形式，同a標(biāo)簽 */
    target?: string | '_blank'
    /** 移除 頂欄 */
    headerRender?: false
    /** 移除 頁腳 */
    footerRender?: false
    /** 移除 菜單 */
    menuRender?: false
    /** 移除 菜單頂欄 (不顯示菜單的 title 和 logo)*/
    menuHeaderRender?: false
    /** 權(quán)限配置，需要與 plugin-access 插件配合使用 (eg ?: canRead)*/
    access?: string
    /** 隱藏子菜單 */
    hideChildrenInMenu?: true
    /** 隱藏自己和子菜單 */
    hideInMenu?: true
    /** 在面包屑中隱藏 */
    hideInBreadcrumb?: true

    /** 隱藏自己，并且將子節(jié)點(diǎn)提升到與自己平級(jí), */
    flatMenu?: true,

    /** 跳轉(zhuǎn)到一個(gè)路由 */
    redirect?: string

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

    /** 路由的標(biāo)題 */
    title?: string
    //

    /** 當(dāng)此節(jié)點(diǎn)被選中的時(shí)候也會(huì)選中 parentKeys 的節(jié)點(diǎn) */
    parentKeys?: string[]

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

    /** 自定義菜單的國際化 key */
    locale?: string | false

    /** 用于標(biāo)定選中的值，默認(rèn)是 path */
    key?: string

    /** 移除 layout (eg: 登錄頁 等等) */
    layout?:false

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