结构目录：

一、使用Vuex的方式

（推荐。结构更清晰一些）

home.vue:

<!--home.vue--><template><div class="homeContainer"><div class="header"><img src="@/assets/logo.png" style="height:70px;width:55px;margin-left:30px;" /><span class="collapseChange" @click="collapseChange()"><i v-if="!isCollapse" class="el-icon-s-fold"></i><i v-else class="el-icon-s-unfold"></i></span><span class="title">后台管理系统</span></div><div class="bottom"><vAside></vAside><div class="view"><router-view></router-view></div></div></div></template> <script>import vAside from "./aside.vue";import bus from "./bus";export default {components: { vAside },data() {return {};},created() {},mounted() {},computed: {isCollapse() {return this.$store.state.isCollapse;}},methods: {collapseChange() {this.$store.commit("handleCollapse", !this.isCollapse);}}};</script> <style lang="scss">.homeContainer {height: 100vh;overflow: hidden;display: flex;flex-flow: column nowrap;.header {background-color: red;height: 85px;text-align: left;display: flex;align-items: center;img:hover {cursor: pointer;filter: brightness(90%);}.collapseChange {display: inline-block;margin-left: 10px;margin-right: 10px;line-height: 50px;text-align: center;width: 50px;}.collapseChange:hover {cursor: pointer;filter: brightness(90%);}.title {line-height: 85px;font-size: 50px;font-family: "黑体";font-weight: bold;}}.bottom {flex: auto;background-color: gray;display: flex;height: calc(100vh - 85px);.view {flex: auto;background-color: rgb(179, 179, 179);height: 100%;overflow: auto;}}}</style>

aside.vue:

<template><div class="aside"><el-menu:collapse="collapse"default-active="$route.path"class="el-menu-vertical-demo menu"text-color="#ffd04b"active-text-color="red"unique-opened><el-submenu index="1"><template slot="title"><img src="@/assets/logo.png" /><span>logo</span></template><el-menu-item index="1-1" @click="changeRoute('page1')"><span>page1</span></el-menu-item><el-menu-item index="1-2" @click="changeRoute('page2')"><span>page2</span></el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><img src="@/assets/logo.png" /><span>logo</span></template><el-menu-item index="2-1" @click="changeRoute('page3')"><span>page3</span></el-menu-item><el-menu-item index="2-2" @click="changeRoute('page4')"><span>page4</span></el-menu-item></el-submenu></el-menu></div></template><script>import bus from "./bus";export default {data() {return {};},created() {},computed: {collapse() {return this.$store.state.isCollapse;}},methods: {//改变路由changeRoute(name) {this.$router.push({ name: name });}}};</script> <style lang='scss'>.aside {display: flex;flex-flow: column nowrap;height: 100%;overflow: auto;.el-menu-vertical-demo:not(.el-menu--collapse) {width: 300px;}.el-menu--collapse {width: 110px;}.el-menu--popup {background-color: red;}.el-menu {height: 100%;background-color: rgb(241, 42, 16);.el-menu-item:hover {background-color: rgb(223, 125, 101);}.el-submenu {.el-submenu__title {height: 100px;display: flex;align-items: center;img {width: 70px;height: 70px;margin-right: 10px;}}.el-submenu__title:hover {background-color: rgb(199, 26, 14);}.el-menu-item {color: rgb(229, 233, 17);background-color: rgb(180, 89, 66);}.el-menu-item:hover {background-color: rgb(223, 125, 101);}.el-icon-arrow-down {color: white;}}}}</style>

 store/index.js:

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {isCollapse: false},mutations: {// 侧边栏折叠handleCollapse(state, data) {state.isCollapse = data;}},actions: {},modules: {}})

二、使用事件车bus.js的方式

home.vue:

<!--home.vue--><template><div class="homeContainer"><div class="header"><img src="@/assets/logo.png" style="height:70px;width:55px;margin-left:30px;" /><span class="el-icon-menu collapseChange" @click="collapseChange"></span><span class="title">后台管理系统</span></div><div class="bottom"><vAside></vAside><div class="view"><router-view></router-view></div></div></div></template><script>import vAside from "./aside.vue";import bus from "./bus";export default {components: { vAside },data() {return {isCollapse: false};},created() {},mounted() {},computed: {},methods: {// 切换折叠状态collapseChange() {this.isCollapse = !this.isCollapse;bus.$emit("collapse", this.isCollapse);}}};</script><style lang="scss">.homeContainer {height: 100vh;overflow: hidden;display: flex;flex-flow: column nowrap;.header {background-color: red;height: 85px;text-align: left;display: flex;align-items: center;img:hover {cursor: pointer;filter: brightness(90%);}.collapseChange {display: inline-block;margin-left: 10px;margin-right: 10px;line-height: 50px;text-align: center;width: 50px;}.collapseChange:hover {cursor: pointer;filter: brightness(90%);}.title {line-height: 85px;font-size: 50px;font-family: "黑体";font-weight: bold;}}.bottom {flex: auto;background-color: gray;display: flex;height: calc(100vh - 85px);.view {flex: auto;background-color: rgb(179, 179, 179);height: 100%;overflow: auto;}}}</style>

aside.vue:

<template><div class="aside"><el-menu:collapse="isCollapse"default-active="$route.path"class="el-menu-vertical-demo menu"text-color="#ffd04b"active-text-color="red"unique-opened><el-submenu index="1"><template slot="title"><img src="@/assets/logo.png" /><span>logo</span></template><el-menu-item index="1-1" @click="changeRoute('page1')"><span>page1</span></el-menu-item><el-menu-item index="1-2" @click="changeRoute('page2')"><span>page2</span></el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><img src="@/assets/img/jdjm.png" /><span>logo</span></template><el-menu-item index="2-1" @click="changeRoute('page3')"><span>page3</span></el-menu-item><el-menu-item index="2-2" @click="changeRoute('page4')"><span>page4</span></el-menu-item></el-submenu></el-menu></div></template><script>import bus from "./bus";export default {data() {return {isCollapse: false //折叠};},created() {bus.$on("collapse", msg => {this.isCollapse = msg;});},computed: {},methods: {//改变路由changeRoute(name) {this.$router.push({ name: name });}}};</script><style lang='scss'>.aside {display: flex;flex-flow: column nowrap;height: 100%;overflow: auto;.el-menu-vertical-demo:not(.el-menu--collapse) {width: 300px;}.el-menu--collapse {width: 110px;}.el-menu--popup {background-color: red;}.el-menu {height: 100%;background-color: rgb(241, 42, 16);.el-menu-item:hover {background-color: rgb(223, 125, 101);}.el-submenu {.el-submenu__title {height: 100px;display: flex;align-items: center;img {width: 70px;height: 70px;margin-right: 10px;}}.el-submenu__title:hover {background-color: rgb(199, 26, 14);}.el-menu-item {color: rgb(229, 233, 17);background-color: rgb(180, 89, 66);}.el-menu-item:hover {background-color: rgb(223, 125, 101);}.el-icon-arrow-down {color: white;}}}}</style>

bus.js:

import Vue from 'vue';// 使用 Event Busconst bus = new Vue();export default bus;