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