iot-front-ui/src/views/HomeView.vue

<template>
  <div class="home">
    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <HomeHeader :leftVisible.sync="leftVisible" :is-login="true" />
      </a-layout-header>
      <a-layout class="main_body">
        <a-drawer v-if="leftVisible"
            placement="left"
            :visible="leftVisible"
            :get-container="false"
            :closable="false"
            @close="closeLeft"
            width="auto"
            :wrap-style="{ position: 'absolute' }">
          <HomeLeft :close="()=>{leftVisible=false}" />
        </a-drawer>
        <a-layout-sider
          v-model="collapse"
          :trigger="null"
          :width="asideWidth"
          style="background: #fff"
          :collapsible="true"
          :collapsed-width="collapsedWidth"
        >
          <HomeAside :collapse.sync="collapse" />
        </a-layout-sider>
        <!-- 内容 -->
        <a-layout-content class="home-page">
          <Transition name="fade-transform" mode="out-in">
            <router-view :key="$route.matched[1].name" />
          </transition>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import "@/style/common.css";
import HomeHeader from "@/components/home/HomeHeader.vue";
import HomeAside from "@/components/home/HomeAside.vue";
import HomeLeft from "@/components/home/HomeLeft.vue";

export default {
  name: "HomeView",
  components: {
    HomeHeader,
    HomeAside,
    HomeLeft,
  },
  data() {
    return {
      collapse: true, // 侧边栏是否收起
      leftVisible: false,
      asideWidth: 160,
      collapsedWidth: 60,
      contentWidth: "84%",
      contentHeight: 450,
    };
  },
  watch: {
    $route() {
      this.judgeHideAside();
    }
  },
  mounted() {
    this.judgeHideAside();
    if (this.$route.matched.length===1) {
      this.$router.push({path: '/dashboard'})
    }
  },
  methods: {
    closeLeft() {
      this.leftVisible = false
    },
    judgeHideAside() {
      let name = this.$route.name
      //if (['dashboard','notice'].indexOf(name)>-1) {
      if (['notice'].indexOf(name)>-1) {
        this.asideWidth = 0;
        this.collapsedWidth=0;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;

  /deep/ .ant-drawer-body {
    padding: 0;
    height: 100%;
  }

  .header {
    height: 60px;
    padding: 0;
    line-height: 60px;
  }
  .main_body{
    height:calc(100vh - 60px);
    position: relative;
  }

  .home-page {
    display: inline-block;
    background: #fff;
    margin: 0;
    transition: all 1s;
    overflow: hidden;
  }
}
</style>