1、用transition元素来做动画， 通过绑定name元素来切换不同的动画
<div class="back" @click="$router.goBack()">返回</div
<transition :name="transition">
<router-view class="view" />
</transition>
2、动画样式
.view {
padding: 50px 300px;
position: absolute;
left: 0;
top: 0;
width: 100%;
transition: all 0.3s linear;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-100%, 0);
}
3、给路由添加返回的状态
import Vue from 'vue'
import Router from 'vue-router'
Router.prototype.back = false;
Router.prototype.goBack = function () {
this.back = true;
this.go(-1)
}
4、检测路由的改变来切换状态，
export default {
name: "app",
data() {
return {
transition: "slide-left"
};
},
watch: {
$route (to, from ) {
var back = this.$router.back;
if (back) { //点击了返回
this.transition = 'slide-right'
}else{
this.transition = 'slide-left'
}
this.$router.back = false;
}
}
}
