目标
- 期待效果
- layout.vue布局页面开发
- 嵌套路由
- NavMenu 导航菜单
- 测试
期待效果
左侧导航，右侧显示导航到的url内容
image.png
第一步 layout.vue布局页面开发
后在layout.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>：主要区域容器。
第二步 编写路由文件，注意嵌套路由
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/Layout', //链接路径
name: 'Layout', //路由名称，
component: Layout,
//对应的组件模板
// 嵌套路由
children: [{
// 这里不设置值，是把main作为默认页面
path: '/ElMain',
name: 'ElMain',
component: ElMain
}, {
path: '/Index',
name: 'Index',
component: Index
}]
}
......
第三步 NavMenu 导航菜单 组件
直接复制下图里面的代码，到layout.vue <el-aside>位置，然后微调样式即可。
image.png
<el-main>标签之间增加如下代码，用于渲染路由到的url
<router-view />
完整代码：
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
: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="ElMain">选项1</el-menu-item>
<el-menu-item index="Index">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main><router-view /></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
image.png
效果图
image.png
一个VUE包含多个vue的情况
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<!-- 可以包含多个vue -->
<zxb-menu></zxb-menu>
</el-aside>
<el-main>
<!--一个url地址-->
<router-view />
</el-main>
</el-container>
</el-container>
</template>
<script>
import zxbMenu from '@/components/menu'
export default {
data() {
return {
};
},
components:{
zxbMenu
},
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>
网友评论