router 返回上一页+动画效果

最新推荐文章于 2023-12-13 16:03:48 发布

dbs5592

最新推荐文章于 2023-12-13 16:03:48 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vhen/p/7782108.html

本文介绍如何在 Vue.js 应用中使用 Router 实现页面回退时的动画效果，通过自定义 goBack 方法及 beforeRouteUpdate 钩子，结合 CSS 过渡动画，实现了滑动切换的视觉体验。

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

Router.prototype.goBack = function () {
  this.isBack = true
  this.go(-1)
}

监听路由变化

beforeRouteUpdate (to, from, next) {
  // 如果isBack为true时，证明是用户点击了回退，执行slide-right动画
   let isBack = this.$router.isBack
   if (isBack) {
      this.transitionName = 'slide-right'
   } else {
      this.transitionName = 'slide-left'
   }
   // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
   this.$router.isBack = false
     next()
}

动画效果

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

.content {
  position: absolute;
  width:100%;
  transition: all .8s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  transform: translate(-50px, 0);
}