版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29918313/article/details/83650445
组件中代码如下:
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
实现效果如下:
在项目中使用:
APP.vue是主组件,所有页面都在App.vue下进行切换,因此,首先在APP.vue中编写如下代码:
<template>
<el-container id="app">
<el-aside width="240px" v-if='showSide' >
<PageSideMenu />
</el-aside>
<router-view/>
</el-container>
</template>
其中,el-aside是左侧导航栏,之所以有v-if判断,是因为在用户首次登陆系统的时候,有登录界面,此时,左侧导航栏需要隐藏。同时,PageSideMenu是左侧导航栏的组件。
router-view我加载了Login.vue页面的代码,el-main部分写登录框的代码,Login.vue页面结构代码如下:
<template>
<el-container>
<el-header><div class="healderTitle">{{}}</div></el-header>
<el-main>
</el-main>
<el-footer><Footer/></el-footer>
</el-container>
</template>
用户登录之后,进入Home.vue页面,页面结构代码如下:
<template>
<el-container>
<el-header>
<div class="healderTitle">
<Dropdown></Dropdown>
</div>
</el-header>
<el-main>
<router-view />
</el-main>
<el-footer><Footer /></el-footer>
</el-container>
</template>
至此,页面结构布局已结束。