vue+iView 动态侧边栏菜单保持高亮选中

iview 组件在使用过程中，多多少少有一些小坑，本文简单罗列一二：

避坑指南： 关于iview 侧边栏菜单未能展开高亮选中回显问题
应用场景：iview-admin下接入动态菜单后，刷新或链接跳入时回显失效

简单就是两个方面：动态菜单接入前和动态菜单接入后菜单保持高亮选中问题。

一，动态菜单接入前：

本博客中有一篇文章简单介绍了 iView跳转子菜单父级菜单保持高亮的实现方法：

:active-name="$route.name" 
1

  
 

1
2
3
4
5
6
7
8
9

菜单保持高亮选中

1，方法一:

跳转前页面的name保持一致，跳转页中meta中加

recoverName: ‘user-info’ // 和跳转前页面的name保持一致。
1

2，方法二:

:active-name="activeName()"
1

1
2
3
4
5
6
7
8

method中加

activeName() {
          if (this.$route.meta.activeName){
               return this.$route.meta.activeName; 
          }else{
               return this.$route.name; 
          }
     },
1
2
3
4
5
6
7

这样两种方法都是没有问题的，但接入权限使用动态菜单时就存在一个问题：

刷新页面或使用链接跳转进入时就会出现跳转到首页，父菜单收起，子菜单未保持选中高亮

二，动态菜单接入后：

本博客中另一篇文章也简单介绍了 iview 动态渲染显示侧边栏菜单及获取选中数据，渲染方法：

:menu-list="menuList"
1

主要是动态菜单接入后，菜单高亮选中就会失效

main.vue 的mounted中接口动态获取菜单数据，渲染侧边栏菜单。

 store.dispatch('getMenuData').then(res => {
  }
1
2

菜单高亮选中失效问题解决方法：

我们可以通过方法 iview menu updateOpened updateActiveName属性：

updateOpened()
updateActiveName()
1
2

this.$refs.sideMenu.updateOpenName(this.$route.name);
1

在菜单请求后调用，但是必须在$nextTick里使用才有效

 store.dispatch('getMenuData').then(res => {
          if(this.$store.getters.menuList){
                this.$nextTick(() => {
                this.$refs.sideMenu.updateOpenName(this.$route.name);
                });
          }
    })
1
2
3
4
5
6
7

这样无论跳转还是强制刷新，侧边栏菜单是会展开的，但是选中的子菜单
依旧没有高亮选中回显

可以在side-menu侧边栏菜单组件中加updateActiveName属性方法更新

this.$refs.menu.updateActiveName() //保持高亮选中
1

updateOpenName (name) {
      if (name === this.$config.homeName) this.openedNames = []
      else this.openedNames = this.getOpenedNamesByActiveName(name)
      if(this.activeName){
          this.$nextTick(() => {
           this.$refs.menu.updateActiveName() //保持高亮选中
        })
      }
    },

1
2
3
4
5
6
7
8
9
10

三，部分主要代码：

1.main.vue中：

import SideMenu from "./components/side-menu";
1

    
      
      
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.side-menu组件中

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

往期更多精彩：

1.vue+iView 权限实践之动态显示侧边栏菜单
2.vue+iView 跳转子菜单父级菜单保持高亮
3.vue+iView 树形菜单回显与选中
4.vue+iView 实现导入与导出excel功能
5.vue+iView table分页勾选记忆功能

喜欢就多多点赞关注。