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>