布局
页面整体布局是一个产品最外层的框架结构，往往会包含导航、侧边栏、面包屑以及内容等。想要了解一个后台项目，先要了解它的基础布局。
Layout
对应代码
@src 是 vite 的 alias 不懂的自行研究。
niuma-admin 中大部分页面都是基于这个 layout 的，除了个别页面如：登录、404 等页面没有使用该 layout。如果你想在一个项目中有多种不同的 layout 也是可以的，只要在一级路由那里选择不同的 layout 组件就行。
js
// 没有 layout
{
name: '404',
path: '/404',
component: () => import('@src/views/not-found/index.vue'),
}
// 有 layout
{
component: () => import('@src/layout/main/index.vue'),
children: [
{
name: 'overview',
path: '/overview',
component: () => import('@src/views/overview/index.vue'),
}
],
}一般都不需要手动配置 Vue Router，想增加新的菜单或者路由，只需要修改 @src/config.js 文件的 menu 配置即可。
上面的例子可以参考一下，在使用后端数据动态生成路由的时候，可以用到。
想自己实现新的 layout 只需在 @src/layout 文件夹下添加新的布局代码，然后 @src/config.js 文件的 menu 菜单项配置中的 meta.layout 配置对应的映射即可。下边是参考配置：
js
{
key: 'overview',
title: '概览',
path: '/overview',
meta: {
icon: 'solar-icon-chart-outline',
layout: 'main', // 布局
component: 'overview',
},
}动态路由的例子代码是 @src/router/dynamic-routes.js 也可以参考，根据自己实际业务调整。
贡献者
SaltedFish964