nsgk_mobile/src/App.vue

<template>
  <div id="app">
    <div
      :class="{
        'nsgk-global-main':
          !$route.meta.hidden || $route.meta.hidden == undefined,
      }"
    >
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <router-view
        v-if="!$route.meta.keepAlive || $route.meta.keepAlive == undefined"
      />
      <navFooter
        v-if="!$route.meta.hidden || $route.meta.hidden == undefined"
      ></navFooter>
    </div>

    <!-- <div
      class="nsgk-global-main"
      v-if="!$route.meta.hidden || $route.meta.hidden == undefined"
    >
      <transition
        :name="
          direction == ''
            ? ''
            : 'fade-' + (direction === 'forward' ? 'last' : 'next')
        "
      >
        <router-view />
      </transition>
      <navFooter></navFooter>
    </div>
    <div class="nsgk-noNav-main" v-else>
      <transition
        :name="
          direction == ''
            ? ''
            : 'fade-' + (direction === 'forward' ? 'last' : 'next')
        "
      >
        <router-view />
      </transition>
    </div> -->
  </div>
</template>

<script>
import navFooter from "@/components/common/nav_footer";
export default {
  name: "App",
  components: { navFooter },
  data: () => {
    return {
      // direction: "",
    };
  },
  watch: {
    // $route(to, from) {
    //   let toName = to.name;
    //   const toIndex = to.meta.index;
    //   const fromIndex = from.meta.index;
    //   this.direction = toIndex < fromIndex ? "forward" : "backward";
    // },
  },
};
</script>

<style lang="scss" >
@import "./assets/css/base";
.nsgk-global-main {
  min-height: 100vh;
  padding-bottom: 110px;
}
// .fade-last-enter-active {
//   animation: bounce-in 0.6s;
// }
// .fade-next-enter-active {
//   animation: bounce-out 0.6s;
// }
// @keyframes bounce-in {
//   0% {
//     transform: translateX(-100%);
//   }
//   100% {
//     transform: translateX(0rem);
//   }
// }
// @keyframes bounce-out {
//   0% {
//     transform: translateX(100%);
//   }
//   100% {
//     transform: translateX(0rem);
//   }
// }
</style>