• （1）、首先配置路由并且修改路由配置

给VueRoute添加一个goBack方法，用于记录路由的前进后退状态 this.isBack = true

在main.js里面 绑定一个goBack方法

• （2）、监听路由变化（在路由变化时判断此时的路由状态是前进还是后退）

动态绑定路由动画，根据路由状态的不同绑定不同的路由动画分别为  ：‘slide-left’  和 'slide-right'

在App.vue文件中

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

export default {
　　data() {
　　　　return {
　　　　　　transitionName: ''
　　　　}
　　},
　　 watch: {
    '$route' (to, from) {
      let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      if (isBack) {
        this.transitionName = 'slide-left'
        this.$router.isBack = false
      } else {
        this.transitionName = 'slide-right'
        this.$router.isBack = true
      }
     }
    }
　 }

• （3）、前进后退动画添加不同的动画效果的css如下：

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-enter {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translateX(-100%);
}

（4）、由于go(-1)和router.push()会有一些左滑右滑的不统一问题，解决办法如下（在main.js中）

window.onload = function () {
  window.addEventListener('popstate', function (e) {
    router.isBack = true
  }, false)
}