前言

实现基本的主页布局
美化header区域
实现左侧导航菜单的基本结构
通过接口获取菜单数据
获取左侧菜单内容
通过双层for循环渲染左侧菜单
对左侧菜单栏设置字体颜色并添加分类图标
解决每次只能打开一个菜单项和边框问题
实现侧边栏的折叠与展开
实现首页路由的重定向功能

整体布局

导航栏+侧栏+主体区域

实现基本的主页布局

使用 Element-UI 布局

美化header区域

实现左侧导航菜单的基本结构

通过接口获取菜单数据

相当于一个预处理过程

需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌

通过 axios 请求拦截器添加 token，保证拥有获取数据的权限。

// 配置请求的根路径
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
axios.interceptors.request.use(config => {
  console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 固定写法return
  return config
})

因为测试的是登录 Authorization 所以返回null 如果是登录之后，调用其他接口就会有一个token值了

获取左侧菜单内容

    // 获取所有菜单
    async getMenuList () {
      const { data: res } = await this.$http.get('menus')
      if(res.meta.status !==200) return this.$message.error(res.meta.msg)
      this.menulist = res.data
      console.log(res)
    }

通过双层for循环渲染左侧菜单

         <!-- 一级菜单 -->
          <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
              <!-- 一级菜单的模板区域 -->
            <template #title>
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>{{item.authName}}</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id" >
              <template #title>
              <!-- 图标 -->
              <i class="el-icon-location"></i>
              <!-- 文本 -->
              <span>{{subItem.authName}}</span>
            </template>
            </el-menu-item>
            </el-submenu>

对左侧菜单栏设置字体颜色并添加分类图标

.iconfont {
  margin-right: 10px;
}

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

      // 菜单的图标
      iconsobj: {
        125: 'el-icon-user',
        103: 'el-icon-setting',
        101: 'el-icon-goods',
        102: 'el-icon-s-order',
        145: 'el-icon-s-marketing'
      }

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

        :uniqueOpened="true"

/* 解决边框对齐问题 */
.el-menu-vertical-demo {
  border-right: none;
}

实现侧边栏的折叠与展开

添加点击事件

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

为事件设置data

      // 是否折叠
      isCollapse: false

为事件设置methods

    // 点击按钮切换折叠菜单
    toggleCollapse () {
      this.isCollapse = !this.isCollapse

在el-menu中绑定属性

          :collapse="isCollapse"

关闭折叠的动画

          :collapse-transition="false"

实现首页路由的重定向功能

在el-menu开启router功能

          router

二级菜单设置

            <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" >

Vue|电商后台管理系统（主页布局开发篇）

前言