电商后台管理2-主页布局(home.vue)

1、总体布局

home.vue中template进行布局，头部区域和页面主体区域。使用了element ui的el-container el-header el-aside el-menu el-submenu el-main这些组件，需要引入element ui并注册组件。

2、获取数据

首先通过接口数据获取菜单数据，通过axios请求拦截器添加token，保证获取数据的权限。（注意：需要授权的API，必须在请求头中使用authorization字段提供token令牌，后端验证token是否正确。

import axios from 'axios'
axios.interceptors.request.use(config => {
    console.log(config);
    NProgress.start()
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})
axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/"
//需要授权的API,必须在请求头中使用Authorization提供token令牌
//通过axios请求拦截器添加token，保证获取权限
//在request拦截器中显示进度条

首先通过接口获取左侧菜单数据menulist；在created阶段执行获取参数的函数，保证页面刷新之前获取到数据。methods里面定义该函数。

created(){   
          // 在此处执行你要执行的函数 
           this.getMenuList();           
           this.activePath=window.sessionStorage.getItem('activePath')   
},

sync getMenuList(){
        //console.log('222');
         const {data:res}= await this.$http.get('menus');
         console.log(res);
        if(res.meta.status!==200) return this.$message.error(res.meta.msg);
        //将获取的数据存放至menulist中
        this.menulist=res.data;
        //console.log(res.data);
}

然后使用双层for循环将渲染菜单（v-for=“item in menulist”）
打印获取到的数据，看下其结构。数组长度为5，我们会将menulist的第一项里面的authName显示在一级菜单（{{item.authName}}，第二层遍历是对item的children（v-for=“subItem in item.children”）操作同上。

    <el-aside :width="isCollapse?'64px':'200px'">
       <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :unique-opened="true" :collapse="isCollapse" :router="true"
:default-active="activePath">              
			<!-- 一级菜单 -->
        	<el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id" active-text-color="#409EFF">
			 <!-- 一级菜单的模板区域 -->
            	<template slot="title">
                 <!-- 图标 -->
                 <i :class="iconsObj[item.id]"></i>
                 <!-- 文本 -->
                 <span>{{item.authName}}</span>
                 </template>
<!-- 二级菜单 -->
                 <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" @click="saveNavState('/'+subItem.path)" :key="subItem.id">
                     <template slot="title">
                      <!-- 图标 -->
                      <i class="el-icon-menu"></i>
                      <!-- 文本 -->
                      <span>{{subItem.authName}}</span>
                       </template>
                         </el-menu-item>           
                       </el-submenu>
                 </el-menu>
            </el-aside>

3、点击激活侧边栏

需要注意的是，点击某侧边栏子项，会激活并点亮对应栏，下面几个属性用来实现侧边栏的主要功能，跳转功能（router)和点击高亮(default-active)。

属性	功能
default-active	当前激活菜单的 index
index	唯一标志
router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

首先点击二级菜单，将会index 作为 path，并保存对应index，绑定到default-active上。
@click=“saveNavState(’/’+subItem.path)” 在二级菜单上点击，触发事件saveNavState，传入子菜单栏的path，使用 sessionStorage 创建一个本地存储的 name/value 对。事件saveNavState在methods里定义。

设置router，根据俄日集采的那的index直接设置路由链接。
点击事件时，也会考虑在页面渲染之前获取 activePath。

//保存链接的激活状态
    saveNavState(activePath){
        window.sessionStorage.setItem('activePath',activePath);
        this.activePath=activePath;
}

created(){
this.activePath=window.sessionStorage.getItem('activePath') 
 }

4、样式设置

1、添加分类的图标，利用数组iconObj，每个菜单都有一个id，对应其图标类别(item.id)

<i :class="iconsObj[item.id]"></i>

data中定义数组

iconsObj:{
        '125':'iconfont icon-usercenter',
        '103':'iconfont icon-add-cart',
        '101':'iconfont icon-browse',
        '102':'iconfont icon-search',
        '145':'iconfont icon-phone',        
    }

 <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-menu"></i>
           <!-- 文本 -->
           <span>{{subItem.authName}}</span>
 </template>

2、设置每次只打开一个菜单项

:unique-opened="true"

3、菜单栏的折叠与展开
绑定isCollapse，点击切换按钮来改变其值，实现折叠和展开。

:collapse="isCollapse"

默认不折叠

 isCollapse:false

点击侧边栏上边的|||，触发折叠事件

<div class="toggle-button" @click="toggleCollapse">|||</div>

对isCollapse取反

    toggleCollapse(){
    this.isCollapse=!this.isCollapse;
}

最重要的一个样式之一：侧边栏的宽度不能定死，应随侧边栏折叠与否变化，即根据isCollapse的值变化
这里是通过对width的值绑定数值，而且根据iscollapse的值动态决定宽度，如果没有这步，样式会丑很多。

<el-aside :width="isCollapse?'64px':'200px'">

5、还有个主页的退出功能的实现

基于token的方式实现退出比较简单，只需要销毁本地的token即可，这样后续不携带token，必须push到login页面，重新登陆，主要代码如下：
触发点击事件logout

 <el-button type="info" @click="logout">退出</el-button>

    logout(){
    	//清空
        window.sessionStorage.clear();
        //跳转
        this.$router.push('/login')
    }