vue后台管理系统布局模板

结构目录：

一、使用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 Bus
const bus = new Vue();
export default bus;