笔记4：主页布局-侧边栏【Vue实战项目：电商管理系统（Element-UI）】

清疚 2023-01-23 03:59 61阅读 0赞

### 文章目录 ###

*   *  1 整体布局
     *  2 完成主页-侧边栏
     *   *  2.1 实现基本的主页布局
         *  2.2 美化主页header区域
         *  2.3 实现导航菜单的基本结构
         *  2.4 通过axios拦截器添加token令牌
         *  2.5 获取左侧菜单数据
         *  2.6 通过for循环渲染左侧菜单
         *  2.7 优化右侧菜单展示
         *  2.8 实现侧边栏折叠与展开效果
         *  2.9 首页路由的重定向效果
         *  2.10 侧边栏路由链接改造

## 1 整体布局 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70]

## 2 完成主页-侧边栏 ##

### 2.1 实现基本的主页布局 ###

*  在 [element ui 官网][element ui] 上查找合适的布局容器  
    Home.vue

<template>
      <el-container class="home-container">
        
        <el-header>Header
          <el-button type="primary" @click="logout">退出登录</el-button>
        </el-header>
        
        <el-container>
          
          <el-aside width="200px">Aside</el-aside>
          
          <el-main>Main</el-main>
        </el-container>
      </el-container>
    </template>

*  导入element相关组件  
    element.js

import { Container, Header, Aside, Main } from 'element-ui'
    
    Vue.use(Container)
    Vue.use(Header)
    Vue.use(Aside)
    Vue.use(Main)

*  绘制背景颜色  
    Home.vue

### 2.2 美化主页header区域 ###

*  插入图片，文字

<el-header>
      <div>
        <img src="../assets/logo.png" alt="" />
        <span>电商管理系统</span>
      </div>
      <el-button type="primary" @click="logout">退出登录</el-button>
    </el-header>

*  编写样式

.el-header { 
      background-color: #353d45;
      display: flex; // 弹性布局
      justify-content: space-between; // 左右贴边
      padding-left: 0; // 左侧贴边
      align-items: center; // 上下居中，该属性依赖 display: flex
      color: #fff;
      font-size: 20px; div { 
        display: flex;
        align-items: center; span{ 
          margin-left: 15px;
        }
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 1]

### 2.3 实现导航菜单的基本结构 ###

*  在[官网][Link 1]找到导航菜单的页面，选择对应的样式进行辅助

<el-aside width="200px">
    
    <el-menu background-color="#64707d">
      
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        
        <el-menu-item index="1-1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>选项一</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    </el-aside>

*  导入相关element组件

import { Menu, Submenu, MenuItem } from 'element-ui'
    
    Vue.use(Menu)
    Vue.use(Submenu)
    Vue.use(MenuItem)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 2]

### 2.4 通过axios拦截器添加token令牌 ###

在后端的接口文档中，注明`需要授权的 API ，必须在请求头中使用 "Authorization" 字段提供 "token" 令牌`

main.js

axios.interceptors.request.use(config=>{ 
      config.headers.Authorization = window.sessionStorage.getItem('token')
      // 在最后必须 return config
      return config
    })

### 2.5 获取左侧菜单数据 ###

*  接口：menus
 *  获取接口数据

### 2.6 通过for循环渲染左侧菜单 ###

<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
    <template slot="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 slot="title">
        <i class="el-icon-location"></i>
        <span>{ { subItem.authName}}</span>
      </template>
    </el-menu-item>
    </el-submenu>

### 2.7 优化右侧菜单展示 ###

*  选中后颜色设定

<el-menu background-color="#64707d" text-color="#fff" active-text-color="#00BFFF">

*  设二级菜单icon

*  设定一级菜单icon

iconsObj:{ 
        '125':'el-icon-s-custom',
        '103':'el-icon-s-opportunity',
        '101':'el-icon-s-cooperation',
        '102':'el-icon-s-order',
        '145':'el-icon-data-line'
    }

*  每次值展开一个菜单  
    使用`menu`的`unique-opened` 属性

<el-menu background-color="#64707d" text-color="#fff" active-text-color="#00BFFF" unique-opened>

*  去除菜单展开后的毛刺

.el-aside { 
      background-color: #64707d;
      .el-menu{ 
        border-right: none;
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 3]

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

*  创建控件并定义样式

.toggle-button { 
      background-color: #5a636d;
      font-size: 10px;
      line-height: 24px;
      color: #fff;
      text-align: center;
      letter-spacing: 0.2em; // 字间距
      cursor: pointer;
    }

*  实现点击后展开或收起  
    创建点击方法

设置变量控制展开或收起，并且关闭收起动效

<el-menu  background-color="#64707d"  text-color="#fff"  active-text-color="#00BFFF"  unique-opened  :collapse="isCollapse"  :collapse-transition="false">

设置变量记录展开或收起

return { 
      isCollapse: false,
    };

实现对变量的控制

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

*  展开或收起展示不同的侧边栏宽度

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

### 2.9 首页路由的重定向效果 ###

*  创建Welcome.vue页面

<template>
      <div >
        <h1>Welcome</h1>
      </div>
    </template>

*  路由文件添加welcome页面，并设置为home的子路由

import Welcome from '../components/Welcome.vue'
    
    routes: [
        { 
          path: '/home', component: Home, redirect: '/welcome', children: [
            {  path: '/welcome', component: Welcome }
          ]
        }

*  Home中设置路由占位符

<el-main>
        
        <router-view></router-view>
    </el-main>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 4]

### 2.10 侧边栏路由链接改造 ###

*  `element`的`menu`有个属性`router`可以自动将将导航的 index 作为 path 跳转。

> `router`：是否使用 `vue-router` 的模式，启用该模式会在激活导航时以 `index` 作为 path 进行路由跳转

*  `menu`添加`router`属性

> `router` 为 `:router="true"` 的简写

<el-menu ... router >

<el-menu-item :index="'/' + subItem.path" ...>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70]: /images/20221004/ca43bb53e0e049c5ac3b4515ff1cc698.png
[element ui]: https://element.eleme.cn/#/zh-CN/component/container
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 1]: /images/20221004/e5485c1ce06a4b5b93f7fe6b0a116399.png
[Link 1]: https://element.eleme.cn/#/zh-CN/component/menu
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 2]: /images/20221004/d9031cbb84644adea2fe587a3ffb9a58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 3]: /images/20221004/35266f4ffe2e4528bebd0b77789a7723.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 4]: /images/20221004/4d203a793ce54c9182ce6cce6647a6c0.png