5-3 顶部导航菜单及与左侧导航联动的面包屑实现(上)

目录：

• 头部页面布局
• 菜单栏伸缩按钮
• 用户信息设置
• 面包屑设置

一、头部页面布局图

先把header头部的颜色变成黑色，在Main.vue中设置：

<template>
    <el-container style="height: 100%">
      .....
        <el-header><Header></Header></el-header>
        <el-main>Main</el-main>
       ....
</template>

<script>
  ....
</script>

<style scoped>
  .el-header{
    background-color: #333333;  /*header的背景色设置为黑色*/
  }
</style>

二、目录结构

...
-src
    -assets  //存放项目所需资源的
        -users.png
    -common
        -Aside.vue
        -Header.vue
    -views     
        -Main.vue
    -App.vue
    -main.js
    -routes.js
....

三 、Header.vue代码编写

说明：这个在element-ui官网上引用的插件

<template>
    <header>
      <div class="l-content">
        <el-button type="primary" icon="el-icon-menu" size="mini"></el-button>   <!--菜单栏伸缩按钮-->
        <el-breadcrumb separator="/">   <!--面包屑-->
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="r-content">  <!--用户信息-->
        <el-dropdown trigger="click" size="mini">
          <span class="el-dropdown-link">
            <img :src="userImg" class="user">  <!--绑定图片-->
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
            <el-dropdown-item icon="el-icon-switch-button">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
</template>

<script>
    export default {
        data(){
          return {
            userImg: require('../assets/imgs/users.png')   //src后面不能直接用在字符串，需要以模块的方式导入，需要用到require
          }
        }
    }
</script>

<style scoped>
  header {   /*header容器，一个template必须只能有一个容器*/
    display: flex;  /*弹性布局*/
    height: 100%;
    align-items: center;
    justify-content: space-between; /*不用float浮动布局，采用两边布局*/
  }
  .l-content {    /*左边的菜单拉伸按钮*/
    display: flex;
    align-items: center;
  }
  .l-content .el-button{   /*面包屑跟 菜单按钮的间距*/
    margin-right: 20px;
  }

  .r-content .user {   /*设置图片的大小，以及圆滑度*/
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
</style>

<style> /*组件嵌套组件的样式不能写scoped，所以这边重新写一个style*/
  .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
    color: #fff;
  }
</style>