原理：在定義路由時新增meta屬性，定義index，然後在頁面監聽路由，根據index的大小決定新增哪種動畫，

具體：

{
    path: '/',
    name:'home',
    component: Home,
    meta: {
      index: 1
    },
},
{
   path: '/search',
  name: 'search',
  component: Search,
  meta: {
    index: 2
  },

},

 使用

<template>
    <div id="video">
        <transition :name="transitionName">
            <keep-alive include="home">
                <router-view class="child-view"> </router-view>
            </keep-alive>
        </transition>
        <vfooter v-if="isShow" />
    </div>
</template>
 

 預設動畫

    data () {
        return{
            transitionName: 'slide-left'
           
        }
    },

監聽路由

watch: {
    $route(to, from) {
        // console.log(to.meta.index,from.meta.index)
        if (to.meta.index > from.meta.index) {
            this.transitionName = "slide-left";
        } else {
            this.transitionName = "slide-right";
        }
    }
}，
 

定義路由動畫

<style lang="scss" >
@import './src/style/reset.scss';
.child-view {
    position: absolute;
    width:100%;
    transition: all .4s ;
}
.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>