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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
<div id="app">
<transition :name="routerAnimate">
<keep-alive :include="keepAlive">
<router-view class="app-content"></router-view>
</keep-alive>
</transition>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
routerAnimate: '',
keepAlive: [],
aliveRoute: ['peopleList']
}
},
watch: {
// 监听 $route 为内页设置不同的过渡效果
"$route" (to, from) {
/*动态设置路由缓存 start*/
//?需要缓存的组件
if (this.aliveRoute.includes(to.name)) {
to.meta.keepAlive = true
}
// console.log(to.path + '---' + to.meta.keepAlive);
let aliveRoute = this.$router.options.routes.filter(e => e.meta && e.meta.keepAlive).map(e => e.name)
this.keepAlive = aliveRoute
/*动态设置路由缓存 end*/
// console.log(aliveRoute);
if (to.meta.index === from.meta.index) {
this.routerAnimate = ""
return;
// this.routerAnimate = "slide-left"
}
//都有值时
if (to.meta.index && from.meta.index) {
if (to.meta.index > from.meta.index) {//前进
this.routerAnimate = "slide-left"
} else {//后退
this.routerAnimate = "slide-right"
}
}
// 如果 该路由 在 免登录之外 且 loginFlg 状态为 需要登录 则跳转登录页
// console.log(this.$store.state.userInfo, '-this.userInfo');
// if (!this.$normalPage().toString().includes(this.$route.path) && (!this.userInfo.loginFlg || this.userInfo.loginFlg != '1')) {
// console.log("检验未通过，走index")
// this.$router.push({
// path: "/index",
// });
// }
},
},
computed: {
userInfo () {
return this.$store.state.userInfo || {}
},
},
methods: {
},
created () {
},
mounted () {
}
}
</script>
<style lang="scss">
/*将公用的样式统一在此导入*/
@import './assets/css/base.css';
@import './assets/css/vuex-ui.css';
@import './assets/css/vant-ui.css';
@import './assets/iconfont.css';
html,
body {
width: 100%;
height: 100%;
font-size: 16px;
//overflow: hidden;
}
html {
font-size: calc(100vw / 7.5); /*1rem = 100px*/
}
#app {
height: 100%;
width: 100%;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
/*opacity: 0;*/
display: none;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
/*opacity: 0;*/
display: none;
transform: translate3d(-100%, 0, 0);
}
</style>