Header组建的搭建

在src文件下新建CommonHeader.vue， @click="handleMenu"点击事件，使Aside组件伸展收缩

<template>
    <header>
        <div class="l-content">
            <el-button plain icon="el-icon-menu" size="mini" @click="handleMenu"></el-button>
               <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="current.path" v-if="current">
                    {{current.label}}
                </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>个人中心</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
        </div>

    
    </header>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{
            userImg:require('../assets/images/user.png')
        }
    } ,
     methods:{
        handleMenu(){
            this.$store.commit('collapseMenu');
        }
    },
    computed:{
        ...mapState({
            current:state=>state.tab.currentMenu
        })
    }
  
}
</script>

<style lang="scss" scoped>
  header{
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: space-between;
      
  }

  .l-content{
      display: flex;
      align-items: center;
      .el-button{
          margin-right: 20px;
      }
  }

  .r-content{
      .user{
          width: 40px;
          height: 40px;
          border-radius: 50%;
      }
  }
 
</style>

在Main.vue中<common-header></common-header>是header组件， 引入import CommonHeader from '../components/CommonHeader.vue'组件

<template>
  <el-container style="height:100%">
  <el-aside width="auto"><common-aside></common-aside></el-aside>
  <el-container>
    <el-header>
      <common-header></common-header>
    </el-header>
    <common-tag></common-tag>
    <el-main> <router-view /> </el-main>
  </el-container>
</el-container>
</template>

<script>

import CommonHeader from '../components/CommonHeader.vue'

export default {
  name: 'Main',
  components: {   
    CommonHeader,   
  }
}
</script>

在main.js中

import { Button, Select,Container,Aside, Header,Main,
  Menu,MenuItem,MenuItemGroup,Submenu,Dropdown,
  DropdownItem,DropdownMenu} from 'element-ui';
  
Vue.use(Dropdown);
Vue.use(DropdownItem);
Vue.use(DropdownMenu);

点击按钮实现Aside组件的伸展收缩，跨组件传值

在CommonAside.vue中添加一个计算属性 computed内有个 isCollapse()

 <h3 v-show="!isCollapse">后台管理系统</h3>
 <h3 v-show="isCollapse">后台</h3>

伸展显示后台管理系统，收缩显示后台

<template>
<!-- @open="handleOpen" @close="handleClose" -->
    <el-menu  class="el-menu-vertical-demo" 
    :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
  <h3 v-show="!isCollapse">后台管理系统</h3>
  <h3 v-show="isCollapse">后台</h3>
  <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
   
    <i :class="'el-icon-'+item.icon"></i>
    <span slot="title">{{item.label}}</span>
  </el-menu-item>
  <el-submenu :index="item.label" v-for="item in hasChildren" :key="item.path">
    <template slot="title">
      <i :class="'el-icon-'+item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </template>
    <el-menu-item-group>     
      <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" 
      :key="subIndex" @click="clickMenu(item)">
      <i :class="'el-icon-'+subItem.icon"></i>
      <span slot="title">
        {{subItem.label}}

      </span>
         </el-menu-item>     
    </el-menu-item-group>       
  </el-submenu>
</el-menu>
</template>

<style lang="scss"  scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;   
  }
  h3{
      text-align: center;
       color: #ffffff;
      line-height: 48px;
  }
  .el-menu {
  height: 100%;
  border: none;
  height: 100vh;
    /* height: 878px; */
  }
</style>

<script>
  export default {
    data() {
      return {
        // isCollapse: false,
        menu:[
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "video-play",
          url: "MallManage/MallManage",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          url: "UserManage/UserManage",
        },
        {
          label: "其他",
          icon: "location",
          path: "/other",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/PageOne",
            },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ],
      };
    },
    methods: {  
      clickMenu(item){
          this.$router.push({name:item.name});
          this.$store.commit('selectMenu',item);
      }
    },
    computed:{
        noChildren(){
            return this.menu.filter((item)=>!item.children);
        },
        hasChildren(){
            return this.menu.filter((item)=>item.children);            
        },
        isCollapse(){
          return this.$store.state.tab.isCollapse
        }
    }
    
  }
</script>

在store文件下新建tab.js，模块 isCollapse:false,伸展

export default{
    state:{
        isCollapse:false     
    },
     mutations:{
        collapseMenu(state){
            state.isCollapse=!state.isCollapse
        }   
    }
    }

在index.js中引入tab.js

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'

Vue.use(Vuex)
Vue.use(tab)
export default new Vuex.Store({ 
  modules: {
    tab
  }
})

实现效果如下图，伸展效果

收缩效果