先上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)"