全部的，请看https://www.jianshu.com/p/93281f5c2b38

• 在入口文件app.vue处理

<template>
    <div id="app" v-if="!isRemoveCatchPage">
        <transition :name="transitionName"
                    @before-leave="beforeLeave"
                    @before-enter="beforeEnter">
          <keep-alive>
            <router-view class='router-view' v-if="$route.meta.keepAlive && isRouterAlive"></router-view>
          </keep-alive>
        </transition>
        <transition :name="transitionName"
                    @before-leave="beforeLeave"
                    @before-enter="beforeEnter">
          <router-view class='router-view' v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
        </transition>
    </div>
</template>

// 设置data数据
isRemoveCatchPage: false,
transitionName : 'pop-' + (this.direction === 'forward' ? 'in' : 'out')
// watch监听路由状态
$route(to, from) {
    to = to || {};
    if (to.name == 'index') {
        this.transitionName = 'fade'
    } else {
        this.transitionName = 'pop-' + (this.direction === 'forward' ? 'in' : 'out');
    }
}
// 添加方法
beforeEnter: function (el) {
  el.removeAttribute("data-animation");
},
beforeLeave: function (el) {
  el.removeAttribute("data-animation");
  if(this.direction == 'reverse') {
    // 返回，添加一个比重高的样式替换缓存的样式
    el.setAttribute("data-animation", this.transitionName + "-leave-active");
  } else if(this.direction == 'forward') {
    // 前进，添加一个比重高的样式替换缓存的样式
    el.setAttribute("data-animation", this.transitionName + "-leave-active");
  }
}

• 通过样式的比重来解决动画效果错乱

提供完整的app.vue文件

<template>
    <div id="app" v-if="!isRemoveCatchPage">
        <transition :name="transitionName"
                    @before-leave="beforeLeave"
                    @before-enter="beforeEnter">
          <keep-alive>
            <router-view class='router-view' v-if="$route.meta.keepAlive && isRouterAlive"></router-view>
          </keep-alive>
        </transition>
        <transition :name="transitionName"
                    @before-leave="beforeLeave"
                    @before-enter="beforeEnter">
          <router-view class='router-view' v-if="!$route.meta.keepAlive && isRouterAlive"></router-view>
          <!-- <router-view class='router-view' v-if="isRouterAlive"></router-view> -->
        </transition>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    import Vue from "vue"
    export default {
        data(){
            return{
                name: "测试话说",
                isRouterAlive: true,
                isRemoveCatchPage: false,
                transitionName : 'pop-' + (this.direction === 'forward' ? 'in' : 'out')
            }
        },
        mounted(){
        },
        computed:{
            ...mapState([
              'direction',
              'isReload',
              'is_remove_catche_page'
            ])
        },
        methods: {
          beforeEnter: function (el) {
            el.removeAttribute("data-animation");
          },
          beforeLeave: function (el) {
            el.removeAttribute("data-animation");
            if(this.direction == 'reverse') {
              // 返回，添加一个比重高的样式替换缓存的样式
              el.setAttribute("data-animation", this.transitionName + "-leave-active");
            } else if(this.direction == 'forward') {
              // 前进，添加一个比重高的样式替换缓存的样式
              el.setAttribute("data-animation", this.transitionName + "-leave-active");
            }
          },
        },
        watch: {
            $route(to, from) {
                to = to || {};
                if (to.name == 'index') {
                    this.transitionName = 'fade'
                } else {
                    this.transitionName = 'pop-' + (this.direction === 'forward' ? 'in' : 'out');
                }
            },
            isReload(value) {
              // 一旦发生变化则重载组件
                this.isRouterAlive = false;
                this.$nextTick(() => {
                  this.isRouterAlive = true;
                })
            },
            is_remove_catche_page(value) {
              // 一旦发生变化则重载组件
                this.isRemoveCatchPage = true;
                this.$nextTick(() => {
                  this.isRemoveCatchPage = false;
                })
            }
        }

    }
</script>

<style>
    #app{
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .pop-out-enter-active,
    .pop-out-leave-active,
    .pop-in-enter-active,
    .pop-in-leave-active {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow-x: hidden;
        overflow-y: auto;
        will-change: opacity,transform;
        transition: all 0.3s;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s;
    }
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }
    .pop-out-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    body [data-animation = 'pop-out-leave-active'], .pop-out-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    .pop-in-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    body [data-animation = 'pop-in-leave-active'], .pop-in-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .vux-loading .weui-toast{
        top: 250px;
    }
</style>