<template>
  <div id="app">
<!--    <transition :name="animateName">-->
      <keep-alive>
        <router-view class="router-container" v-if="$route.meta.keepAlive"> </router-view>
      </keep-alive>
<!--    </transition>-->
<!--    <transition :name="animateName">-->
      <router-view class="router-container" v-if="!$route.meta.keepAlive"> </router-view>
<!--    </transition>-->
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import routerService from "@/services/router.service";
import { Dialog } from "vant";
Vue.use(Dialog);
@Component({
  name: "App",
})
export default class App extends Vue {
  animateName = ""; // 路由动画名称
  pathMap: any = {}; // 存储路由对象

  @Watch("$route")
  onRouterChanged(to: any, from: any) {
    if (from.path === "/") {
      return;
    }
    const anim = routerService.animateName(to, from, this);
    // this.animateName = `slide-${anim}`;
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  .main-view {
    width: 100%;
    height: 100%;
  }
}
</style>