<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!-- or name="fade" -->
      <!-- <router-view :key="key"></router-view> -->
      <div>
        <keep-alive :include="cachedViews">
          <router-view :key="key"/>
        </keep-alive>
      </div>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.catchedViews
    },
    key() {
      // if (this.$route.meta.keepAlive) {
      //   return this.$route.name !== undefined ? this.$route.name : this.$route
      // } else {
      //   return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
      // }
      return this.$route.fullPath
    }
  }
}
</script>

<style scoped>
  .app-main {
    /*50 = navbar  */
    /*min-height: calc(100vh - 50px);*/
    position: relative;
    overflow: hidden;
  }
</style>