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

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

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

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

一，动态菜单接入前：

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

:active-name="$route.name"

  <side-menuaccordionref="sideMenu":active-name="$route.name":collapsed="collapsed"@on-select="turnToPage":menu-list="menuList"></side-menu>

菜单保持高亮选中

1，方法一:

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

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

2，方法二:

:active-name="activeName()"

<side-menuaccordionref="sideMenu":active-name="activeName()":collapsed="collapsed"@on-select="turnToPage":menu-list="menuList">

method中加

activeName() {if (this.$route.meta.activeName){return this.$route.meta.activeName; }else{return this.$route.name; }},

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

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

二，动态菜单接入后：

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

:menu-list="menuList"

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

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

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

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

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

updateOpened()
updateActiveName()

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

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

 store.dispatch('getMenuData').then(res => {if(this.$store.getters.menuList){this.$nextTick(() => {this.$refs.sideMenu.updateOpenName(this.$route.name);});}})

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

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

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

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.main.vue中：

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

    <Siderhide-triggercollapsible:width="200":collapsed-width="64"v-model="collapsed"class="left-sider":style="{overflow: 'hidden'}"><side-menuaccordionref="sideMenu":active-name="activeName()":collapsed="collapsed"@on-select="turnToPage":menu-list="menuList"></side-menu></Sider>

2.side-menu组件中

<template><div class="side-menu-wrapper"><slot></slot><Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect"><template v-for="item in menuList"><template v-if="item.children && item.children.length === 1"><side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item><menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item></template><template v-else><side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item><menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item></template></template></Menu><div class="menu-collapsed" v-show="collapsed" :list="menuList"><template v-for="item in menuList"><collapsed-menu :center="true" v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu><Tooltip transfer v-else :content="showTitle(item.children && item.children[0] ? item.children[0] : item)" placement="right" :key="`drop-menu-${item.name}`"><a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><common-icon :right="0" :size="item.size" :color="textColor" :type="item.icon || (item.children && item.children[0].icon)"/></a></Tooltip></template></div></div>
</template>
<script>
import SideMenuItem from './side-menu-item.vue'
import CollapsedMenu from './collapsed-menu.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'
export default {name: 'SideMenu',mixins: [ mixin ],components: {SideMenuItem,CollapsedMenu},props: {menuList: {type: Array,default () {return []}},collapsed: {type: Boolean},theme: {type: String,default: 'dark'},rootIconSize: {type: Number,default: 20},iconSize: {type: Number,default: 16},accordion: Boolean,activeName: {type: String,default: ''},openNames: {type: Array,default: () => []}},data () {return {openedNames: [],}},methods: {handleSelect (name) {this.$emit('on-select', name)},getOpenedNamesByActiveName (name) {return this.$route.matched.map(item => item.name).filter(item => item !== name)},updateOpenName (name) {if (name === this.$config.homeName) this.openedNames = []else this.openedNames = this.getOpenedNamesByActiveName(name)if(this.activeName){this.$nextTick(() => {this.$refs.menu.updateActiveName()})}},},computed: {textColor () {return this.theme === 'dark' ? '#fff' : '#495060'}},watch: {activeName (name) {if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))},openNames (newNames) {this.openedNames = newNames},openedNames () {this.$nextTick(() => {this.$refs.menu.updateOpened()})}},mounted () {this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))}
}
</script>
<style lang="less">
@import './side-menu.less';
</style>

往期更多精彩：

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

喜欢就多多点赞关注。
在这里插入图片描述