vue+elementUI实现侧边菜单栏的功能
仅作记录,上接上代码
<template> <div class="main" style="height:100vh;"> <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; } .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、子路由的配置
子路由怎么设置,网上有很多,同一个组件,可以同时用于子路由和主路由中,并不影响。