index.vue
1.41 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
<template>
<a-layout style="height:100vh">
<a-layout-header class="nav-header">
<Header />
</a-layout-header>
<a-layout>
<SiderMenu />
<a-layout style="padding: 0 24px 24px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item v-for="(item,key) in breadList" :key="key">{{item}}</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content :style="{ background: '#fff', margin: 0, minHeight: '280px' }">
<router-view></router-view>
</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</template>
<script>
import Header from './components/Header'
import SiderMenu from './components/SiderMenu'
import breadTextConfig from '@/utils/breadcrumb'
export default {
name: 'DefaultLayout',
components: {
Header,
SiderMenu
},
watch: {
'$route.path': function (val) {
this.getBreadCrumb(val)
}
},
data() {
return {
breadList: []
};
},
mounted() {
const currentPath = this.$route.path
this.getBreadCrumb(currentPath)
// console.log('breadList', this.breadList)
},
methods: {
getBreadCrumb(currentPath) {
for (let i in breadTextConfig) {
if (i == currentPath) {
this.breadList = breadTextConfig[i]
}
}
}
}
};
</script>
<style>
.nav-header {
padding: 0 !important;
background: #fff !important;
}
.left-sider {
width: 200px;
}
</style>