【前端】vue，实现router的切换，上滑下滑，左滑右滑

<template>
  <div id="app" style="overflow: hidden;position: relative;">
    <transition :name="routerTrans" mode="out-in">
      <router-view v-if="indexShow" name="index" class="child-view" style="position: absolute;top: 0;left: 0"/>
    </transition>
    <transition :name="routerTrans" mode="out-in">
      <router-view v-if="homeShow" name="home" class="child-view" style="position: absolute;top: 0;left: 0;"/>
    </transition>
    <transition :name="routerTrans" mode="out-in">
      <router-view v-if="blogShow" name="blog" class="child-view" style="position: absolute;top: 0;left: 0;"/>
    </transition>
  </div>
</template>

<script>
  import $ from 'jquery'
  import Icon from 'ant-design-vue/es/icon/index'

  const MyIcon = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_2253742_i247dt9fum.js' // 在 iconfont.cn 上生成
  });
  export default {
    name: 'App',
    components: {
      MyIcon
    },
    data() {
      return {
        routerTrans: "to-top",
        indexShow: false,
        homeShow: false,
        blogShow: false
      }
    },
    created() {
    },
    mounted() {
      //初始化当前url显示的页面
      var metaIndex = this.$route.meta.index;
      switch (metaIndex) {
        case 1:
          this.indexShow = true;
          this.routerTrans="";
          break;
        case 2:
          this.homeShow = true;
          this.routerTrans="";
          break;
        case 3:
          this.blogShow = true;
          this.routerTrans="";
          break;
        default:
          console.log("地址有问题！")
      }
    },
    //监听路由的路径，可以通过不同的路径去选择不同的切换效果
    watch: {
      $route: function (to, from) {
        let toIndex = to.meta.index;
        let fromIndex = from.meta.index;
        console.log("离开", fromIndex);//离开导航
        console.log("进来", toIndex);//目标导航
        if (toIndex === fromIndex){
          this.routerTrans = "none";
        }
        if (fromIndex <= 3 && toIndex <= 3) {
          if (fromIndex < toIndex) {
            this.routerTrans = "to-down";
          } else if (fromIndex>toIndex) {
            this.routerTrans = "to-top";
          }else {
            if (to.meta.child>from.meta.child){
              this.routerTrans = "none";
            }
          }
        } else {
          this.routerTrans = "none"
        }
        // if (fromIndex === 1 && toIndex === 2) {
        //   console.log("to-down")
        // } else if (fromIndex === 2 && toIndex === 1) {
        //   this.routerTrans = "to-top";
        //   console.log("to-top")
        // } else if (fromIndex === 1 && toIndex === 3) {
        //   this.routerTrans = "to-down";
        //   console.log("to-right")
        // } else if (fromIndex === 3 && toIndex === 1) {
        //   this.routerTrans = "to-top";
        //   console.log("to-left")
        // } else if (fromIndex === 2 && toIndex === 3) {
        //   this.routerTrans = "to-down";
        //   console.log("to-top")
        // } else if (fromIndex === 3 && toIndex === 2) {
        //   this.routerTrans = "to-top";
        //   console.log("to-down")
        // } else {
        //   this.routerTrans = "none"
        // }

        this.indexShow = false;
        this.homeShow = false;
        this.blogShow = false;
        if (toIndex === 1) {
          this.indexShow = true;
          return;
        }
        if (toIndex === 2) {
          this.homeShow = true;
          return;
        }
        if (toIndex === 3) {
          this.blogShow = true;
        }

      }
    },
    methods: {}
  }
</script>

<style>
  template {
    height: 100%;
    width: 100%;
  }

  #app {
    width: 100%;
    height: 100%;
    font-family: "plantc", serif;
    /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /*margin-top: 60px;*/
  }

  /*滚动条优化*/
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(240, 240, 240, 1);
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0 rgba(240, 240, 240, .5);
    border-radius: 10px;
    background-color: rgba(240, 240, 240, .5);
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0 rgba(240, 240, 240, .5);
    background-color: rgb(96, 96, 96);
  }

  #app > div {
    height: 100%;
    width: 100%;
  }

  img {
    vertical-align: text-top !important;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  *{
    margin: 0;
    padding: 0;
  }
  button {
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  /*动画切换路由*/
  /*去右*/
  .to-right-enter {
    transform: translateX(100%);
  }

  .to-right-enter-to {
    transform: translateX(0);
  }

  .to-right-enter-active {
    transition: 1s;
  }

  .to-right-leave {
    transform: translateX(0);
  }

  .to-right-leave-to {
    transform: translateX(100%);
  }

  .to-right-leave-active {
    transition: 1s;
  }


  /*去左*/
  .to-left-enter {
    transform: translateX(-100%);
  }

  .to-left-enter-to {
    transform: translateX(0);
  }

  .to-left-enter-active {
    transition: 1s;
  }

  .to-left-leave {
    transform: translateX(0);
  }

  .to-left-leave-to {
    transform: translateX(-100%);
  }

  .to-left-leave-active {
    transition: 1s;
  }


  /*去下*/
  .to-down-enter {
    transform: translateY(100%);
  }

  .to-down-enter-to {
    transform: translateY(0);
  }

  .to-down-enter-active {
    transition: 1s;
  }

  .to-down-leave {
    transform: translateY(0);
  }

  .to-down-leave-to {
    transform: translateY(100%);
  }

  .to-down-leave-active {
    transition: 1s;
  }

  /*去上*/
  .to-top-enter {
    transform: translateY(-100%);
  }

  .to-top-enter-to {
    transform: translateY(0);
  }

  .to-top-enter-active {
    transition: 1s;
  }

  .to-top-leave {
    transform: translateY(0);
  }

  .to-top-leave-to {
    transform: translateY(-100%);
  }

  .to-top-leave-active {
    transition: 1s;
  }
</style>