目标
- 期待效果
- layout.vue布局页面开发
- 嵌套路由
- NavMenu 导航菜单
- 测试
期待效果
左侧导航，右侧显示导航到的url内容
image.png
第一步 Index.vue布局页面开发
后在Index.vue中运用Element UI Container 布局容器组件。
image.png
代码如下：
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
目前效果
image.png
Container说明
Container，用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。
调整页面，高度自适应
<template>
<div id="aaa" >
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside ></el-aside>
<el-main>Main</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
</script>
<style>
#aaa{
margin: -60px 0 0 0;
height: 100%;
}
.el-header,.el-footer{
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
height: 100%;
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
height: 100%;
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
html,body{
height: 100%;
}
#app{
height: 100%;
}
.el-container{
height: 100%;
}
</style>
第二步 编写路由文件，注意嵌套路由
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
/* {
path: '/reg',
name: 'Register',
component: Register
}, */
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/index',
name: 'Index',
component: Index,
// 嵌套路由
children: [{
// 这里不设置值，是把main作为默认页面
path: '/reg',
name: 'Register',
component: Register
}]
}
]
......
第三步 NavMenu 导航菜单 组件
新建菜单组件Menu.vue,
直接复制下图里面的代码到Menu.vue然后微调样式。
image.png
<el-main>标签之间增加如下代码，用于渲染路由到的url
<router-view />
Menu.vue完整代码：
<template>
<el-menu
default-active="1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
active-text-color="#ffd04b"
:default-active="$router.path"
router>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>基础信息维护</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="reg">用户管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style>
</style>
注意的地方：
image.png
image.png
在index.vue中引用menu
<template>
<div id="aaa" >
<el-container>
<el-header>欢迎:{{realName}}</el-header>
<el-container>
<el-aside >
<!--菜单树-->
<leftmenu></leftmenu>
</el-aside>
<el-main>
<!--导航到的内容-->
<router-view />
</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
import leftmenu from '@/components/Menu'
export default {
data(){
return{
realName:'',
useType:''
}
},
components: {
leftmenu
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
mounted:function(){
let name=sessionStorage.getItem("userName");
let type=sessionStorage.getItem("useType");
this.realName=name;
this.useType=type;
}
}
</script>
<style>
#aaa{
margin: -60px 0 0 0;
height: 100%;
}
.el-header,.el-footer{
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
height: 100%;
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
height: 100%;
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
html,body{
height: 100%;
}
#app{
height: 100%;
}
.el-container{
height: 100%;
}
</style>
效果图
image.png
网友评论