1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
<div id="app">
<transition :name="transitionName">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view v-if="!$route.meta.keepAlive"/>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
pathList: [],
transitionName: 'slide-left',
}
},
watch: { // 监听路由变化
$route (to, from) {
if (this.pathList.includes(to.path)) {
const index = (this.pathList.findIndex(() => {
return from.path
}))
this.pathList.splice(index, 1)
this.$router.isBack = true
} else {
this.pathList.push(to.path)
this.$router.isBack = false
}
if (to.path === '/tab/home-page') {
this.$router.isBack = true
this.pathList = []
}
// let isBack = this.$router.isBack
this.transitionName = 'router-slide-right'
this.$router.isBack = false
},
},
methods: {
onSwipeLeft () {
this.$router.go(-1)
},
},
}
</script>
<style lang="less">
@import "styles/variables";
@import "styles/public-style";
html, body, #app {
height: 100%;
width: 100%;
overflow-x: hidden;
//overflow: auto;
//-webkit-overflow-scrolling: touch;
//overflow-scrolling: touch;
}
</style>