element-ui el-menu 刷新保持高亮的写法 

 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>

 

posted @ 2021-03-05 17:28  鼓舞飞扬  阅读(748)  评论(0)    收藏  举报