vue实现仿app左右滑出滑入效果

在App.vue里利用wacth即可实现，下面是代码

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>
    <TabBar :data="tabbars" v-if="isShowFooter" />
  </div>
</template>
<script>
import TabBar from '@/components/TabBar'

export default {
  name: 'App',
  data() {
    return {
      tabbars: [
        {
          title: '首页',
          to: {
            name: 'Home'
          },
          icon: 'home-o'
        },
        {
          title: '关于我',
          to: {
            name: 'About'
          },
          icon: 'user-o'
        }
      ],
      isShowFooter: false,
      transitionName: "slide-left", //初始过渡动画方向
    }
  },
  components: {
    TabBar
  },
  watch: {
    $route(to, from) {
      // 切换动画
      let isBack = this.$router.isBack; // 监听路由变化时的状态为前进还是后退
      if (isBack) {
        this.transitionName = "slide-right";
      } else {
        this.transitionName = "slide-left";
      }
      this.$router.isBack = false;
      this.isShowFooter = to.meta.isShowFooter || false;
    },
  },
}
</script>
<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
  // min-height: 100%;
  margin: auto;
  position: relative;

  .Router {
    position: absolute; //解决滑动出现白屏的问题
    width: 100%;
    // height: 100%;
    top: 0;
    transition: all 0.35s ease;
    will-change: transform;
    // backface-visibility: hidden;
    // perspective: 1000;
    padding-bottom: 50px;
  }
  .slide-left-enter,
  .slide-right-leave-active {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
  }

  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .footer-mTabbar {
    position: fixed;
    bottom: 0;
  }
}
</style>

document.body.addEventListener("focusout", () => {
  // 回到原点  \
  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
});