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

 

程序員兼職