vue 在微信端实现前进左滑，返回右滑的动画效果

记录项目中遇到的问题：
1.前进页面左滑，返回页面右滑 的动画效果
2.前进页面数据刷新，返回页面不刷新
目的：通过缓存数据，减少调用接口的次数

App.vue

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
         <router-view class="Router" v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>

    <transition :name="transitionName">
      <router-view class="Router" v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      transitionName: 'slide-right'
    }
  },
  mounted () {

  },
  watch: {
    '$route' (to, from) {
      // 切换动画
      let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      if (isBack) {
        this.transitionName = 'slide-right'
        from.meta.keepAlive = false
        to.meta.keepAlive = true
        // console.log('退后不缓存from' + JSON.stringify(from.path))
        // console.log('退后缓存to' + JSON.stringify(to.path))
      } else {
        from.meta.keepAlive = true
        to.meta.keepAlive = false
        // console.log('前进缓存from' + JSON.stringify(from.path))
        // console.log('前进不缓存to' + JSON.stringify(to.path))
        if (this.$route.path.split('/').length < 3) {
          this.transitionName = 'slide-fade'
        } else {
          this.transitionName = 'slide-left'
        }
      }
      this.$router.isBack = false
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>
<style lang="scss">
  @import './assets/scss/common';

  html,body {
    height: 100%;
  }

  a.active {
    text-decoration: none;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F5F5F5;
    height:100%;
    //渐变动效
    .Router {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: all .377s ease;
      box-sizing: border-box;
      overflow: auto;
    }
    .slide-left-enter,
    .slide-right-leave-active {
      opacity: 0;
      -webkit-transform: translate(100%, 0);
      transform: translate(100%, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
      opacity: 0;
      -webkit-transform: translate(-100%, 0);
      transform: translate(-100% 0);
    }
  }
</style>

解决问题一的方案

微信端没有返回按钮，通过监听返回的事件

在router 目录下的index.js中添加如下代码

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

App.vue 中添加watch的代码

watch: {
    '$route' (to, from) {
      // 切换动画
      let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      if (isBack) {
        this.transitionName = 'slide-right'
        from.meta.keepAlive = false
        to.meta.keepAlive = true
        // console.log('退后不缓存from' + JSON.stringify(from.path))
        // console.log('退后缓存to' + JSON.stringify(to.path))
      } else {
        from.meta.keepAlive = true
        to.meta.keepAlive = false
        // console.log('前进缓存from' + JSON.stringify(from.path))
        // console.log('前进不缓存to' + JSON.stringify(to.path))
        if (this.$route.path.split('/').length < 3) {
          this.transitionName = 'slide-fade'
        } else {
          this.transitionName = 'slide-left'
        }
      }
      this.$router.isBack = false
    }
  },

这里通过判断isBack是否为true,改变动画效果。
注：动画效果的class需要在样式中定义

解决问题二的方案

这里使用了keepAlive 查看详情
举例：比如从A页面前进到B页面
前进的时候将A路由的keepAlive 置为true,B路由keepAlive置为false
返回的时候将B路由的keepAlive 置为true,A路由keepAlive置为false

以上

关于keepAlive可以对照参考这篇文章，解释比较详细查看详情