GCLS_Page_Learn/src/layouts/index.vue

<template>
  <div class="app">
    <div class="app-header">
      <layout-header />
      <bread-crumb />
    </div>
    <section class="app-main">
      <transition name="fade-transfrom" mode="out-in">
        <router-view :key="key"></router-view>
      </transition>
    </section>
  </div>
</template>

<script>
import LayoutHeader from './components/LayoutHeader';
import BreadCrumb from './components/BreadCrumb';

export default {
  name: 'Layout',
  components: {
    LayoutHeader,
    BreadCrumb
  },
  computed: {
    key() {
      return this.$route.path;
    }
  },
  created() {
    window.onerror = function (msg, source, lineno, colno, error) {
      if (msg === 'Script error.' && lineno === 0 && colno === 0) return true;
    };
  }
};
</script>

<style lang="scss">
.app {
  height: 100%;
  padding-top: $header-h;

  &-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  &-main {
    width: 100%;
    height: calc(100vh - #{$header-h});
    overflow-y: auto;
    background-color: $bacColor;
  }
}
</style>