5. element-ui 后台布局
项目进行到后台部分了，在这里整理下后台导航栏菜单路由的跳转详解。
项目环境：项目环境：vue + vue-cli + element-ui
附最终效果图：
image.png
1、整体布局
我这里用的是element-ui组件中的布局容器Container ，链接如下
https://element.eleme.cn/#/zh-CN/component/container](https://element.eleme.cn/#/zh-CN/component/container
image.png
2、侧边导航栏
https://element.eleme.cn/#/zh-CN/component/menu
需求：当点击左侧导航时，右边窗口显示出对应的内容
- 1、代码编写
<el-menu :default-openeds="['1', '2']" //默认进入后台时，哪些导航是全部展开
:default-active="this.$route.path" // 这里是指当前路由，这样在路由变化的时候，对应的el-menu才会高亮。
:router="true" // 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
background-color="rgba(52, 64, 88)"
text-color="white"> //导航栏字体颜色
<!--左侧项目-->
<el-submenu index="1" >
<template slot="title"><i class="el-icon-message"></i>项目</template>
<el-menu-item-group>
//index：类型为字符串，在每一个el-menu-item组件上都有一个编号，给default-active标记
<el-menu-item index="/home/unfinish">进行中</el-menu-item>
<el-menu-item index="/home/finish">已完成</el-menu-item>
<el-menu-item index="/home/create">创建项目</el-menu-item>
<el-menu-item index="/home/search">搜索</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
- 2、路由编写
在 router/index.js 文件中编写路由，这里有父子路由之分，跳转到后台的 home 就是父路由，点击导航菜单渲染出来的页面文件是子路由。
import home from '@/views/backstage/home'
import finish from '@/views/backstage/project/finish'
import unfinish from '@/views/backstage/project/unfinish'
path: '/home', // 后台首页home
name: 'home',
component: home, // 父路由
children: [
{
path: '/home/unfinish', // 项目 进行中
name: 'unfinish',
component: unfinish // 子路由
},
{
path: '/home/finish', // 项目 已完成
name: 'finish',
component: finish // 子路由
}
image.png
注意：在每个子路由的跳转路径前，千万千万要加上父路由home在前面，否则将无法识别出正确的路径。
3、右侧主内容显示窗口
就是路由跳转到的页面展示位置
后台管理系统的整体布局内容是固定的，变化的只是当你点导航菜单时，渲染出相对应的内容而已，那么渲染出的内容在哪里展示？？
是由router-view决定的，如下，这个写在哪里，跳转出来的页面在哪里展示，见上面布局显示
<el-main>
<router-view></router-view> // 很重要，千万不要忘记
</el-main>
导航菜单上的每一个加载渲染出来的页面都需要单独建一个文件，如果你不单独分开页面写，当导航的内容特别多时， 你怎么办？一个.vue文件要承受所有的渲染页面内容，这将非常不利于你后期的修改及维护，并且容易出错。
image.png
image.png
4、浏览器宽度变化时
-
1、布局错位
我在整体缩放渲染效果时，发现内容并不能随着浏览器缩放（浏览器宽度变化）的大小而变化，而是发生了错位和偏移，这时我们只需要在整体布局的最外层绑定一个class，然后设置一个 min-width 就可以解决这个问题了。但是在设置了 min-width 后，顶部有两个功能按钮还是会发生错位，这两个按钮我最开始是采用padding/margin都不能解决问题，因为padding/margin设置后，他们的右边始终有你设的多少像素。这时你给发生错位的这两个div的外层再包一层div，然后设置浮动left / right，就解决了。
image.png
<div style="display: inline-block;float: right">
<div class="class3" >
<el-badge is-dot class="item"><i class="el-icon-bell"></i></el-badge>
</div>
<div class="class4" >
<el-dropdown style="align-items: center">
<span class="el-dropdown-link" style="color: white;">万象<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>基本资料</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
css
.class3{
float: left;
}
.class4{
float: right;
margin-right: 30px;
}
<template>
<el-container class="wrap">
<...>
</el-container>
</template>
css
.wrap{
min-width: 1280px;
}
image.png
-
2、element-ui组件样式突然变大
见下面的铃铛icon
image.png
原因是浏览器宽度变化时，element-ui的font-size突然变大，这个不是每个组件都会这样，只有一些才会这样，那么我们怎么解决呢？
我们只需要给其固定的大小就不会发生这种情况了
//icon
<i class="el-icon-arrow-down el-icon--right"></i>
//icon css
.el-icon-arrow-down {
font-size: 12px;
}
