index.vue
2.69 KB
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
<template>
<div
v-if="routerView"
class="app-main-container"
:class="{ 'index-container': $route.meta.title === '首页' }"
>
<transition mode="out-in" name="fade-transform">
<keep-alive :include="keepAliveApps">
<router-view :key="key" class="app-main-height" />
</keep-alive>
</transition>
<!-- <footer v-show="footerCopyright" class="footer-copyright">
Copyright
<ht-icon name="copyright" scale="1.15" />
宏天软件 {{ fullYear }}
</footer> -->
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { copyright, footerCopyright, keepAliveMaxNum, title } from '@/config'
export default {
name: 'HtAppMain',
data() {
return {
show: false,
fullYear: new Date().getFullYear(),
copyright,
title,
keepAliveMaxNum,
routerView: true,
footerCopyright,
keepAliveApps: [],
}
},
computed: {
...mapGetters({
visitedRoutes: 'tabsBar/visitedRoutes',
device: 'settings/device',
account: 'user/account',
}),
cachedRoutes() {
const cachedRoutesArr = []
this.visitedRoutes.forEach((item) => {
if (!item.meta.noKeepAlive) {
cachedRoutesArr.push(item.name)
}
})
return cachedRoutesArr
},
key() {
return this.$route.fullPath
},
},
watch: {
$route: {
handler(route) {
if ('mobile' === this.device) this.foldSideBar()
},
immediate: true,
},
},
created() {
//重载所有路由
this.$baseEventBus.$on('reload-router-view', () => {
this.routerView = false
setTimeout(() => {
this.routerView = true
}, 100)
})
if (localStorage.getItem(`keepalive_${this.account}`)) {
const keepaliveRouteList = JSON.parse(
localStorage.getItem(`keepalive_${this.account}`)
)
if (keepaliveRouteList && keepaliveRouteList.length) {
this.keepAliveApps = keepaliveRouteList.map((item) => item.name)
}
}
},
methods: {
...mapActions({
foldSideBar: 'settings/foldSideBar',
}),
},
}
</script>
<style lang="scss" scoped>
.app-main-container {
position: relative;
width: 100%;
.app-keel {
margin: $base-padding;
}
.app-main-height {
min-height: $base-app-main-height;
}
.footer-copyright {
min-height: 55px;
line-height: 55px;
color: rgba(0, 0, 0, 0.45);
text-align: center;
border-top: 1px dashed $base-border-color;
}
}
.index-container {
// overflow-y: scroll;
}
</style>