common/src/components/admin-frame/Home.vue

<template>
  <div id="Home">
    <el-container>
      <el-header style="padding:0"><v-head></v-head></el-header>
      <el-container>
        <el-aside width="200px"><v-sidebar></v-sidebar></el-aside>
        <el-main>
          <div class="content-box" :class="{ 'content-collapse': collapse }">
            <v-tags></v-tags>
            <el-col :span="24" class="content">
              <transition name="move" mode="out-in">
                <el-row>
                  <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
                  <el-col :span="24" class="container" style="padding:15px"><router-view></router-view></el-col>
                </el-row>
              </transition>
              <el-backtop target=".content"></el-backtop>
            </el-col>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import breadcrumb from './breadcrumb.vue';
import bus from './bus';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'Home',
  props: {},
  components: { vHead, vSidebar, vTags, breadcrumb },
  data: function() {
    return {
      collapse: false,
      tagsList: [],
    };
  },
  created() {
    bus.$on('collapse-content', msg => {
      this.collapse = msg;
    });
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on('tags', msg => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    });
  },
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped></style>