布局

概述

布局也是本框架的一个特色的特点，支持一个应用多个布局在线动态切换的特性，满足不同场景下的布局显示需求。布局主要用于承载页面之间共同的结构，比如导航栏，菜单栏等信息。 他们独立于页面，可以被不同的页面快速的复用。

布局配置

布局配置同页面配置一致采用约定式配置方式，约定在源码目录src下以.layout.jsx结尾命名的文件定义为布局组件，Doer 会自动将其注册为可用布局组件。 布局不同于页面路由，布局仅支持单层目录规则路径，即以布局组件文件所在目录名称作为布局名称。

同样，我们以一个实际的例子帮助大家理解布局配置规则:

└── src
    └── layouts
        ├── full
        |   └── Full.layout.jsx             布局路径: /full
        └── vertical
            └── Vertical.layout.jsx         布局路径: /vertical

布局组件可以在源码目录下的任意位置，并且以.layout.jsx结尾命名，不管最终的文件路径如何，布局的名称始终以布局组件所在目录名称作为布局名称。 为了便于管理，我们始终希望大家以如上结构方式组织布局组件。

编写布局

编写布局组件与编写普通组件基本一致，唯一需要注意的是布局组件的children属性是必须的，因为布局组件的主要作用是承载页面内容，children属性就是页面内容。

// src/layouts/vertical/Vertical.layout.jsx

function Vertical({ children }) {
  // 这里的children是必须的
  // 其他逻辑编写如同普通组件一致
  // 根据自己的业务需求编写代码即可
  return <div>{children}</div>;
}

export default Vertical;

布局使用

布局的使用方式是通过 url 地址中指定布局名称来访问对应的布局

比如要访问上面刚创建的vertical布局，可以通过以下地址访问:

host#/vertical/[路由]/[路由]

布局始终是在路径的开头部分，可以省略，不存在时表示不使用任何布局，常用于满足如登录页等不需要布局的场景。