效果展示

css 滑入和滑出的动画

.twofade-enter {transform: translateX(100%);}
.twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;}
.twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;}
.twofade-leave-to {transform: translateX(-100%);}
.threefade-enter {transform: translateX(-100%);}
.threefade-leave-to {transform: translateX(100%);} 
.threefade-enter-active {transition: all 0s;position: absolute;z-index: 2;}
.threefade-leave-active {transition: all .3s;position: absolute;z-index: 999;height: 100%;background:#ececec;}

transition

使用 vue提供的 transition 标签，data中定义 transitionName 变量

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

export default {
  name:"App",
  data(){
    return{
      transitionName:""
    }
  }
}

watch 监听路由的变化

通过监听路由的变化 知道是返回还是打开新页面 在通过在变量 transitionName 赋不同的值改变动画

watch:{
    $route(to, from) {
      if(to.meta.index > from.meta.index){
        this.transitionName = 'twofade';
      }else if(to.meta.index < from.meta.index){
        this.transitionName = 'threefade';
      }
    }
  }

可能遇到的问题

关于样式 操作上在切换中可能会有遇到样式的问题 需要调整样式来达到自己需要的效果
我的解决方法是

#app{//width: 100%;height: 100%;overflow-x: hidden;position: absolute;
  &>div{width: 100%;min-height: 100vh;}
}