router 返回上一页+动画效果

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);
}

 

程序员兼职