1，使用transition方式给跟路由渲染位置设置全局动画，

2，给router的路径设置号meta的index层级，

3，给跟路由动画设置动画切换效果和逻辑交互判断；

如下代码：

根实例中设置动画（app的渲染位置），和判断交互层级

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>

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

<style lang="less">
.slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active {
      will-change: transform;
      transition: all 500ms;
      position: absolute;
    }
    // 右滑初始装状态
    .slide-right-enter {
      // opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    
// 右滑执行状态
    .slide-right-leave-active {
      // opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    // 右滑最终状态
    .slide-right-enter-to{
      // opacity: 1;
      transform: translate3d(0, 0, 0);
    }
// 左滑初始装状态
    .slide-left-enter {
      // opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
// 左滑执行状态
    .slide-left-leave-active {
      // opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
     // 左滑最终状态
    .slide-right-enter-to{
      // opacity: 1;
      transform: translate3d(0, 0, 0);
    }
</style>

在router当中设置meta的index值，用于判断切换动画样式;

页面进出效果meta对象里index索引的定义

import Home from '../views/Home';
import First from '../views/First';

import Second from '../views/Second';


Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: {
      index: 0,
    },
  },{
    path: "/Home",
    name: "Home",
    component: Home,
    meta: {
      index: 0,
    },
  },{
    path: "/First",
    name: "First",
    component: First,
    meta: {
      index: 1,
    },
  },{
    path: "/Second",
    name: "Second",
    component: Second,
    meta: {
      index: 2,
    },
  }

];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

思路就是css写出动画效果，跟组件监听路由的变化，如果to索引大于from索引,使用前进的动画,反之使用后退的动画。