<template>
  <div id="app">
     <top-bar v-if="!$route.meta.noShowbar"></top-bar>
     <breadcrumb v-if="$route.meta.showBreadcrumb"></breadcrumb>    
     <!-- <div :class="'appContent' {}"> -->
        <div v-bind:class="[{ hasBread: $route.meta.showBreadcrumb }, 'appContent']">
          <router-view />
     </div>
  </div>
</template>

<script>
import topBar from '@/components/topbar'
import breadcrumb from '@/components/breadcrumb'
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  components:{topBar,breadcrumb},
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload  () {
     this.isRouterAlive = false;
     this.$nextTick(function () {
       this.isRouterAlive = true;
     })
    },
  },
}
</script>

<style lang="less">
  @import 'style/common.less';
  @import 'style/dialog.less';
  #app {
    width: 100%;
    height: 100%;
    background: @page-bg-white;
    overflow: hidden;
    font-family: fz;
  }
  .appContent{
    width: 100%;
    height: calc(100vh - 76px);
    overflow:hidden;
    padding: 20px;
    &.hasBread{
      height: calc(100vh - 112px);
    }
  }
</style>