記錄專案中遇到的問題：
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可以對照參考這篇文章，解釋比較詳細檢視詳情