布局文件在/src/layouts文件夹中，目前有
- default 默认布局： SableAdmin 脚手架的主要布局，包含 左侧侧边栏、顶栏、底部
- blank 空白布局：不需要左侧侧边栏的部分可以引入此布局
在路由配置文件中的使用
一般一级路由为布局，下面是主布局和空白布局的示例
主布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| import Layout from "@/layouts/default/index.vue"
import { RouteRecordRaw } from "vue-router"
export default {
path: "/editor",
component: Layout,
name: "editor",
meta: {
auth: true,
menu: {
title: "编辑器",
order: 2,
showParentMenu: false,
icon: "ion:document",
},
type: "layout",
},
children: [
{
path: "base",
name: "editor.base",
component: () => import("@/views/editor/base.vue"),
meta: { menu: { title: "富文本编辑器" } },
},
{
path: "markdown",
name: "editor.markdown",
component: () => import("@/views/editor/markdown.vue"),
meta: {
permissions: ["admin"],
menu: { title: "markdown编辑器" },
},
},
],
} as RouteRecordRaw
|
空白布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| import BlankLayout from "@/layouts/blank.vue"
import { RouteRecordRaw } from "vue-router"
export default {
path: "/error",
component: BlankLayout,
name: "error",
meta: {
menu: {
show: true,
title: "错误页面",
order: 3,
icon: "ion:ios-close-circle",
},
type: "layout",
},
children: [
{
path: "404",
name: "error.404",
component: () => import("@/views/errors/404.vue"),
meta: { menu: { show: true, title: "404页面" } },
},
{
path: "502",
name: "error.502",
component: () => import("@/views/errors/502.vue"),
meta: { menu: { show: true, title: "502页面" } },
},
],
} as RouteRecordRaw
|
