在App.vue中:

使用transition包裹router-view

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

css样式:

// 内容动画
.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-left-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    .slide-left-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

watch监听路由的变化:

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

在路由设置js中:

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta:{
        title:'首页',
        index:1
    }
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
    meta:{
        title:'关于',
        index:2
    }
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue'),
      meta:{
          title:'登录',
          index:3
      }
  },
  {path:"*",component: () => import('../views/404.vue'),meta:{title:'404'}}
]