Vue过场动画判断是进入还是退出一行代码完美解决_vue3怎么判断路由是前进还是后退-优快云博客

在Vue开发中，通过路由守卫和时间戳可以巧妙地实现场景切换的过场动画判断。在beforeEach钩子中，为每个路由添加时间戳，然后在路由变更处理器中比较新旧路由的时间戳，以此判断是进入还是退出。通过这种方式，无需在每个路由的meta中添加标识，解决了大量路由判断的难题。结合CSS动画，可以实现从右往左或从左往右的平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue开发中我们有时需要给场景切换加上一个过场动画但是有一个难题过场动画如何判断到底是进还退出的

我在网上也找过很多方法，比如最常见的就是给路由的meta中加一个标识通过标识判断大小从而知道是退是进

但是如果路由很多，怎么办，那要判断标识都是一个难题，

苦思冥想许久，突然想到一个究极解决办法，我们可以通过时间来判断，我们在路由守卫中，每当进入一个路由之前，

给他加个时间戳

router.beforeEach(async (to, from, next) => {
     if(!to.meta.Time)
          to.meta.Time = new Date().getTime().toString();
});

然后直接判断时间戳的大小，

时间戳大的肯定是进，小的肯定是退出，

通过它不就可以判断是前进是退出了吗

$route: {
	 handler: function(route,oldRoute) {
          let to,from;
          if(route) to = route.meta.Time;
          if(oldRoute) from = oldRoute.meta.Time;
          if(to < from){
              //设置动画名称 出来是从左往右
              this.transitionName = 'slide-right';
          }else{
              // 进去是从右往左
              this.transitionName = 'slide-left';
          }
	},
	immediate: true
},

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

<style>
.router{
	width:100%
}
.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);
}
</style>