首先，如果要动画跳转的话我们就可以使用vue里面的属性transition属性，这个属性vue里面介绍的很具体，大家就需要自己去看了，链接：https://cn.vuejs.org/v2/guide/transitions.html

要跳转的话就需要在视图那里进行跳转，在app.vue里面

    <transition :name="transitionName">
      <router-view/>
    </transition>

然后需要给这个绑定的name进行监听，因为要实时监听

  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
        //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  },

上面的代码就是一个路由跳转的监听，to.name.index是在路由里面给他定义的一个index值，然后根据这个值的大小来进行跳转，代码如下

routes: [
    {
      path: '/',
      name: 'login',
      component: (resolve)=>require(['@/components/login.vue'],resolve),
      // component:login,
      meta:{index:0},//meta对象的index用来定义当前路由的层级,由小到大,由低到高
    },
    {
      path: '/register',
      name: 'register',
      component: (resolve)=>require(['@/components/register.vue'],resolve),
      // component: register,
      meta:{index:1},
    },
]

上面的还使用了路由的懒加载

然后回到哦监听，根据跳转的不同来改变他的class类名，下面进行类名的定义：

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all .3s;
    position: absolute;
    width:100%;
    left:0;
    /* 必须设置width和left不然会有空白 */
}
.slide-right-enter {
    transform: translateX(-100%);
}
.slide-right-leave-active {
    transform: translateX(100%);
}
.slide-left-enter {
    transform: translateX(100%);
}
.slide-left-leave-active {
    transform: translateX(-100%);
}

这样就大工告成了

下面吧代码截图给大家：