# 布局

页面整体布局是一个产品最外层的框架结构，往往会包含导航、侧边栏、面包屑以及内容等。想要了解一个后台项目，先要了解它的基础布局。

# Layout/Index

对应代码

采用的是 Flex 布局，admin-element-vue js.v1 中大部分页面都是基于这个 layout/Index 的，除了个别页面如：login , 404 等页面没有使用该 layout/Index。如果你想在一个项目中有多种不同的layout 也是很方便的，只要在一级路由那里选择不同的layout组件就行。

// 没有用 layout
{
    path: '/login',
    meta: {
      title: '登录'
    },
    component: () => import('@/views/Login'),
    hidden: true
},  

// 用了 layout/Index
{
    path: '/',
    redirect: '/home',
    component: LayoutIndex,
    meta: { title: '首页', icon: 'home' },
    children: [
      {
        path: 'home',
        component: () => import('@/views/Home'),
        name: 'home',
        meta: { title: '主控台', icon: 'control', belongTopMenu: '/' }
      }
      
    ]
}

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

这里使用了 vue-router 路由嵌套 (opens new window), 所以一般情况下，你增加或者修改页面只会影响 app-main这个主体区域。其它配置在 layout 中的内容如：侧边栏或者导航栏都是不会随着你主体页面变化而变化的。

/profile                              /posts
+------------------+                  +-----------------+
| layout           |                  | layout          |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

1
2
3
4
5
6
7
8

当然你也可以一个项目里面使用多个不同的 layout，只要在你想作用的路由父级上引用它就可以了。