【Vue实战项目-电商管理系统】三、主页部分

1、使用Element UI布局主页

对用到的部分进行按需导入注册。可使用fs capture、color picker、snipaste等工具进行取色。
Element UI每个标签的名字并不是标签名，通过控制台可以看到标签的名字其实是类名，可以直接用。

2、axios请求拦截器添加token

通过axios请求拦截器在authorization字段添加token.
在main.js导入axios的地方添加：

axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

3、请求菜单数据

在created钩子函数中调用getMenuList，发出网络请求，请求成功时把获取的数据设为data中的menuList。

注意：网络请求为异步操作，用async和await接收数据。

 created() {
    this.getMenuList()
  },

网络请求的操作写在methods中。

async getMenuList() {
      const { data: res } = await this.$http.get('menus')
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.menuList = res.data
    },

4、v-for渲染左侧菜单

注意：v-for时都需要绑定唯一的key。Element UI中index为每一项的唯一标志，也不能一样，否则操作一个相当于操作全部，可以设置为路径或id。

<!-- 一级菜单 -->
<el-submenu
  v-for="item in menuList"
  :key="item.id"
  :index="item.path"
>
><!-- 二级菜单 -->
<el-menu-item
  v-for="each in item.children"
  :key="each.key"
  :index="each.path"
  @click="navChange(each.path)"
>

对于每项菜单的内容，可以用{{}}来动态绑定：

<span>{{ item.authName }}</span>

对于每项菜单的图标，由于并没有后端传来的数据，需要前端来进行一一对应。可以利用每项菜单的唯一标志，如id或者index，创建一个对象，使得图标资源与菜单项一一对应起来。

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

data中图标类名在对象中以键值对方式对应：

menuIcon: {
        125: 'iconfont icon-smile',
        103: 'iconfont icon-user',
        101: 'iconfont icon-home',
        102: 'iconfont icon-lock',
        145: 'iconfont icon-smile'
      },

5、菜单栏折叠

可以通过绑定点击事件来进行折叠。

1. 设置一个判断是否折叠的值isToggle，每当监听到点击事件时就进行取反。

data中：

isToggle: false,

methods中：

toggleChange() {
      this.isToggle = !this.isToggle
    },

3. isToggle值绑定在el-menu的:collapse属性上

<el-menu
          text-color="#000"
          active-text-color="#66b1ff"
          unique-opened
          :collapse-transition="false"
          :collapse="isToggle"
          router
          :default-active="activePath"
        >

3. 但此时背景侧边栏的宽度并不会跟着变，所以同时需要通过isToggle值来改变整个侧边栏的宽度。

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

6、首页路由重定向

通过el-menu的router实现即可，index对应着路径。

注意：添加图片时需要在前面加~
~@/assets/image/logo.png