在router文件夾中的index.js中添加
Router.prototype.goBack = function () {
this.isBack = true
window.history.go(-1)
}
在app.vue中添加
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'App',
data() {
return {
transitionName: '' // 默認動態(tài)路由變化為slide-right
}
},
watch: {
'$route' (to, from) {
let isBack = this.$router.isBack // 監(jiān)聽路由變化時的狀態(tài)為前進還是后退
if(isBack) { // 如果是返回灭衷，則左側(cè)滑到右邊去「滑入右邊」旷余，否則打開界面從右邊滑到左邊去
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
this.$router.isBack = false
}
},
}
</script>
<style>
.Router {
position: absolute;
width: 100%;
transition: all .8s ease;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(100%, 0);
/*-ms-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>
在components文件夾的組件中使用
<template>
<div>
<div class="head">
<img src="../assets/home/backtrack-icon.png" width="7%" @click="go()">
</div>
</div>
</template>
<script>
export default {
name: "invitation",
methods: {
go() {
this.$router.goBack()
}
}
}
</script>
<style scoped>
@import "./css/invitation.css";
</style>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
