9.后台管理系统主页面布局以及左侧导航栏设计
1.首页布局
步骤：
在views目录下新建Main.vue文件，作为登录之后的布局
参考：element-ui
使用此模块的目的是，当中间内容部分有超出时，可以固定左侧以及头部不动，中间内容进行滚动
代码
<template><el-container style="height: 100%;"><el-aside width="200px" style="background-color:blue">左侧导航栏</el-aside><el-container><el-header style="background:red;">中间头部</el-header><el-main style="background:yellow;">内容区域</el-main></el-container></el-container></template><script>export default {}</script><style lang="scss" scoped></style>
效果
2.导航栏的制作
在components目录下新建common目录，在该目录下新建CommonAside.vue组件内容为：
<template><el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><!-- 没有儿子的导航栏 --><el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path"><i :class="'el-icon-' + item.icon"></i><span slot="title">{{ item.label }}</span></el-menu-item><!-- 有儿子的导航栏 --><el-submenu index="index" v-for="(item, index) in hasChildren" :key="index"><template slot="title"><i :class="'el-icon-' + item.icon"></i><span>{{ item.label }}</span></template><el-menu-item-group><el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex"><i :class="'el-icon-' + subItem.icon"></i><span slot="title">{{ subItem.label }}</span></el-menu-item></el-menu-item-group></el-submenu></el-menu></template><script>export default {data() {return {asideMenu: [{path: '/',name: 'home',label: '首页',icon: 'info'},{path: '/video',name: 'video',label: '视频管理页',icon: 'video-play'},{path: '/user',name: 'user',label: '用户管理页',icon: 'user'},{path: '/other',name: 'other',label: '其他',icon: 'phone',children: [{path: '/page1',name: 'page1',label: '其他1',icon: 'phone'},{path: '/page2',name: 'page2',label: '其他2',icon: 'phone'}]}]}},computed: {// 判断导航栏是否有子节点noChildren() {return this.asideMenu.filter(item => !item.children)},hasChildren() {return this.asideMenu.filter(item => item.children)}}}</script><style lang="scss" scoped>.el-menu {height: 100%;border: none;}</style>
在views目录下的Main.vue 中导入组件
代码如下
<template><el-container style="height: 100%;"><el-aside width="200px"><!-- <div>logo</div> --><common-aside></common-aside></el-aside><el-container><el-header style="background:#6699ff;">中间头部</el-header><el-main style="background:#fff;">内容区域</el-main></el-container></el-container></template><script>// 导入导航栏组件import CommonAside from '@/components/common/CommonAside.vue'export default {// 组件注册components: {CommonAside}}</script><style lang="scss" scoped></style>
