vue-router设置页面切换滑动效果的方法及解决遇到的坑

先上gif：这里演示顺序是1232121

 

 

 

1.router.js中配置入口路由

{

    path: '/',

    redirect: '/index'

  }

2.main.js中new vue()之上：

window.addEventListener('popstate',function(e){

  router.isBack = true

},false)

3.app.vue中配置公共滑动动画

<div id="app">

    <transition :name="transitionName">

      <router-view></router-view>  

    </transition>

 </div>

并监听路由判定是前进还是后退给予不同的动画名称

watch:{

    $route(to,from){

      let isBack = this.$router.isBack

      if(this.$router.isBack){

        this.transitionName = 'slide-right'

      }else{

        this.transitionName = 'slide-left'

      }

      this.$router.isBack = false

    }

  },

以及公共的css

.slide-left-enter, .slide-right-leave-to {

  opacity: 0;

  transform: translateX(100%)

}

.slide-left-leave-to, .slide-right-enter {

  opacity: 0;

  transform: translateX(-100%)

}

.slide-left-enter-active, .slide-left-leave-active, .slide-right-enter-active, .slide-right-leave-active {

  transition: .5s;

  position: absolute;

  top:0;

}

这样效果已经实现，这里说一些遇到的坑和解决方法：

1.前进或是后退动画方向不对，这里我是将router.js中的mode值从history路由改为hash路由

2.最后一个页面的返回动画方向未改变，常见的下一个页面的hearder页面的返回通常用组件写的，需要手动改掉返回路径@click="$router.back(-1)"