Vue-router combined with transition to achieve app forward and rewind animation transitions

First configure the route and modify the routing configuration

路由配置就不讲了

VueRouter.prototype.goBack = function () {///focus, add a GoBack method to Vueroute to record the forward and backward state of the route This.isback = True
This.isback = True
Window.history.go (-1)
}

Monitoring Routing Changes

<template>
<div>
<transition:name= "Transitionname" >//Dynamic bound route animation
<router-view class= "Router" ></router-view>
</transition>
</div>
</template>

<script>
Export Default {
Data () {
return {
Transitionname: ' slide-right '//default dynamic route changed to Slide-right
}
},
Watch: {
' $route ' (to, from) {
Let Isback = this. $router. Isback// monitor the status of the route change to forward or backward
if (isback) {
This.transitionname = ' Slide-right '
} else {
This.transitionname = ' Slide-left '
}
this. $router. Isback = False
}
}
}
</script>

<style>
. Router {
Position:absolute;
width:100%;
Transition:all. 8s Ease;
top:40px;
}

. Slide-left-enter,
. slide-right-leave-active {
opacity:0;
-webkit-transform:translate (100%, 0);
Transform:translate (100%, 0);
}

. Slide-left-leave-active,
. slide-right-enter {
opacity:0;
-webkit-transform:translate (-100%, 0);
Transform:translate (-100% 0);
}
</style>

Route forward in the normal way to go on the line, back when the call GoBack method is ok

Vue-router combined with transition to achieve app forward and rewind animation transitions