App.vue
<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>
data () {
return {
transitionName: "slide-right" / / the default dynamic route changes to slide-right
}
},
watch: {
" $route" (to,) From) {
let isBack = this.$router.isBack / / whether the state is forward or backward when listening for route changes
if (isBack) {
this.transitionName = "slide-right"
} else {
this.transitionName =" slide-left"
}
this.$router.isBack = False
}
}
<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 >