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
}
参考文章
发表评论