1 <template>
2 <el-menu
3 :collapse="isCollapse"
4 :default-active="defaultActive"
5 class="el-menu-vertical-demo"
6 background-color="#001529"
7 text-color="#fff"
8 active-text-color="#ffd04b"
9 >
10 <h3 v-show="isCollapse">
11 <img src="../assets/images/logo.png" />
12 </h3>
13 <h3 v-show="!isCollapse">
14 <img src="../assets/images/logo.png" />
15 运维系统
16 </h3>
17 <el-menu-item :index="item.path" v-for="item in asideMenu" :key="item.path" @click="clickMenu(item)">
18 <i :class="'el-icon-' + item.icon"></i>
19 <span slot="title">{{ item.label }}</span>
20 </el-menu-item>
21 </el-menu>
22 </template>
23
24 <script>
25 export default {
26 computed: {
27 isCollapse() {
28 return this.$store.state.tab.isCollapse
29 }
30 },
31 watch: {
32 $route () {
33 this.setCurrentRoute()
34 }
35 },
36 data() {
37 return {
38 asideMenu: [
39 {
40 path: '/home',
41 name: 'home',
42 label: '巡检列表',
43 icon: 'tickets'
44 },
45 {
46 path: '/service-inspect',
47 name: 'service-inspect',
48 label: '新增巡检',
49 icon: 'document-add'
50 },
51 ],
52 defaultActive: '/home',
53 }
54 },
55 created () {
56 this.setCurrentRoute()
57 },
58 methods: {
59 setCurrentRoute () {
60 this.defaultActive = this.$route.path //关键 通过他就可以监听到当前路由状态并激活当前菜单
61 },
62 clickMenu(item) {
63 this.$router.push({ name: item.name })
64 this.$store.commit('selectMenu', item)
65 }
66 }
67 }
68 </script>
69
70 <style lang="scss" scoped>
71 .el-menu {
72 height: 100%;
73 border: none;
74 h3 {
75 height: 64px;
76 color: #ffffff;
77 padding: 0 20px;
78 font-size: 14px;
79 text-align: center;
80 display: flex;
81 align-items: center;
82 img {
83 width: 30px;
84 height: 30px;
85 margin-right: 5px;
86 }
87 }
88 }
89 .el-menu-vertical-demo:not(.el-menu--collapse) {
90 width: 160px;
91 }
92 </style>
