vue+elementUI实现侧边菜单栏的功能仅作记录，上接上代码
<template>
<div class="main" >
<el-container>
<el-header>
yy
</el-header>
<el-container>
<el-aside width="200px">
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
@select="handleSelect_2"
router>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-menu"></i>
<span>问卷管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/main/wenjuanlist">
<i class="el-icon-menu"></i>
问卷设计
</el-menu-item>
<el-menu-item index="/main/wenjuanlist">
<i class="el-icon-menu"></i>
问卷分配
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>
<span>我的问卷</span>
</template>
<el-menu-item-group>
<el-menu-item index="/main/RenList">
<i class="el-icon-menu"></i>
⾃测问卷
</el-menu-item>
<el-menu-item index="/main/RenLists">
<i class="el-icon-menu"></i>
互评问卷
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="">
<i class="el-icon-menu"></i>
<span slot="title">问卷设计</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title"> ⼈才库</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">代理招聘</span>
</el-menu-item>
<el-menu-item index="/main/home">
<i class="el-icon-setting"></i>
<span slot="title">⼿机版主页</span>
</el-menu-item>
<el-menu-item index="5">
<i class="el-icon-setting"></i>
<span slot="title">企业账户</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name:'main',
data(){
return{
}
},
methods:{
},
}
</script>
<style scoped>
.el-header, .el-footer {
background-color: #409eff;
color: #333;
text-align: center;
line-height: 80px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: left;
line-height: 200px;
}
vue element admin.el-main {
background-color: #E9EEF3;
color: #333;
/* text-align: center;
line-height: 160px; */
}
</style>
1、如何使布局填充满页⾯
在模版第⼀层的div中使⽤样式，使height:100vh就可以了，放到⾥层的元素中也可以，但是页⾯会有滚动条出现。
2、点击菜单后新页⾯的显⽰位置
  点击菜单后新页⾯的显⽰位置由router-view决定，当然你需要先在index.js中设置好⼦路由后才能显⽰在router-view中，不然还是显⽰在新窗⼝中
3、最重要的部分
　这两个是⼀定需要有的，⾄于el-menu中的样式，⽹上没到它的样式是啥，估计有个默认的吧，设置好宽度就可以了。
:default-active="$route.path"
router
4、⼦路由的配置
　⼦路由怎么设置，⽹上有很多，同⼀个组件，可以同时⽤于⼦路由和主路由中，并不影响。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。