5主页

实现基本的页面布局

·使用element ui 的container 布局容器
· 在plugins的element.js里注册组件

Container\Header\Aside\Main
·进行全局注册（element.js）

import Vue from 'vue'
import { Button, Form, FormItem,Input,Message,Container,
    Header,Aside,Main} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)

·为header、aside、main添加背景色
el-header就是类名

·实现全屏

<el-container class="home-container">
        .home-container{
                 height:100%;
                }

美化主页的header区域

·写好html
1、在header里面新增一个div 包含 img、span（写文字）
新增el-buttom 包含退出按钮
·写css
flex布局、justify-content：space-between（左右贴边）
效果

.el-header{
    background-color: #373d41;
    display :flex;
    // 左右贴边
    justify-content :space-between;
    padding :0;
    // 纵向居中
    align-items :center;
    // 字体颜色
    color :#fff;
    font-size :20px;
    >div{
        display :flex;
        align-items :center;
        span {
            margin-left :15px;
        }
    }
}

实现导航菜单的基本结构

·使用element ui的navMenu导航菜单
·导入这些组件

导入后就有效果了

·修改一下样式、
背景色
我们只需要二级菜单、所以要删除一些只保留二级菜单

<!-- 一级菜单 -->
                    <el-submenu index="1">
                        <!-- 一级菜单的模板区域 -->
                        <template slot="title">
                            <!-- 图标 -->
                        <i class="el-icon-location"></i>
                        <!-- 文本 -->
                        <span>导航一</span>
                        </template>               
                        <!-- 二级菜单文本区域 -->
                        <el-menu-item index="1-4-1">
                            <template slot="title">
                            <!-- 图标 -->
                            <i class="el-icon-location"></i>
                            <!-- 文本 -->
                            <span>导航一</span>
                        </template>      

                        </el-menu-item>
                    </el-submenu>

通过axios拦截器添加token验证

·在API文档中的说明，我们需要注意一下内容
需要授权的 API，必须在请求头中使用Authorization字段提供token令牌
就是说只有登录后才能显示的页面需要授权，除了登录页面、其他都要授权
·设置请求拦截器

·在main.js 入口文件添加拦截器（request） config（请求对象）
config输出如下图、header就是请求头、
还没挂载前是没有Authorization的、我们通过命令手动挂载

·挂载
#获取左侧菜单数据
（难点在于要知道数据在哪）
·在API文档查看请求方式

·创建生命周期函数（加载的时候就要立即获取数据）、调用getMenuList获取所有菜单
·然后在methods中定义这个函数getMenuList
·res输出的内容

·获取数据后我们需要立即挂载
1、在data（）创建menuList数组

·判断状态码 然后赋值给menulist

#通过双层for循环渲染左侧菜单
一级循环是一级菜单、二级循环是二级菜单
·给一级菜单 进行for循环
key值为 id

·渲染一级菜单名称

 <!-- 一级菜单 -->
                    <!-- 1、v-for="item in menuList" :key=item.id 循环获取一级名称 -->
                    <el-submenu index="1" v-for="item in menuList" :key=item.id>
                        <!-- 一级菜单的模板区域 -->
                        <template slot="title">
                            <!-- 图标 -->
                        <i class="el-icon-location"></i>
                        <!-- 文本 -->
                        <!-- 2、渲染一级名称 -->
                        <span>{{item.authName}}</span>

·为 el-submenu 添加唯一值 index
这里我们进行动态数据绑定 ：index
:index =’’item.id + ‘ ’ ’’ //因为index只能是字符串 所以我们添加一个空值

 <el-submenu :index="item.id + ' ' " v-for="item in menuList" :key=item.id>

·循环二级菜单 subitem
在el-menu-item里面设置

为选中项设置字体颜色并添加分类图标

·颜色直接通过active-text-color 修改
修改图标
·二级菜单图标都一样、直接修改就好

·一级菜单图标不一样、通过自定义图标进行设置
1、定义一个图标数据对象、通过id（key）指定图标类名（value）

2、动态绑定

<!-- 图标 -->
                        <i :class="iconsObj[item.id]"></i>

每次只能打开一个菜单项并解决边框问题

·使用element ui 中 NavMenu菜单 中提供的属性 unique-opened

·

实现侧边栏的折叠与展开效果

·添加一个折叠与展开按钮

 <!-- 导航折叠与展开按钮 -->
                <div class="toggle-button"> ||| </div>

·添加点击事件 toggleCollapse()

使用提供的属性 collapse（el-menu 里面设置）

·把控制collapse 的布尔值 设置为data 里的 isCollapse
·通过toggleCollapse()方法控制 isCollapse

·这个时候动画效果不太好 只能这样

·使用collapse-transition（el-menu）关闭动画效果

·由于el-aside 宽度写死了，所以没有变化，我们使用isCollapse进行控制

<!-- 侧边栏 -->
           <el-aside :width="isCollapse ? '64px' : '200px' ">

实现首页路由的重定向效果

登录到主页，就显示欢迎页面
·定义一个welcome组件
·在路由中导入welcome组件,作为home的子组件

·在home.vue的主体 main 放置路由占位符

实现侧边栏路由链接的改造

点击不同菜单切换到对应页面
·使用NavMenu 菜单中的 router属性

·使用 subItem.path 作为跳转地址