iview 組件在使用過程中，多多少少有一些小坑，本文簡單羅列一二：
避坑指南： 關于iview 側邊欄菜單未能展開高亮選中回顯問題
應用場景：iview-admin下接入動態(tài)菜單后，刷新或鏈接跳入時回顯失效
簡單就是兩個方面：動態(tài)菜單接入前和動態(tài)菜單接入后菜單保持高亮選中問題。
一，動態(tài)菜單接入前：
本博客中有一篇文章簡單介紹了 iView跳轉子菜單父級菜單保持高亮的實現(xiàn)方法：
:active-name="$route.name"
<side-menu
accordion
ref="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-menu
accordion
ref="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;
}
},
這樣兩種方法都是沒有問題的，但接入權限使用動態(tài)菜單時就存在一個問題：
刷新頁面或使用鏈接跳轉進入時就會出現(xiàn)跳轉到首頁，父菜單收起，子菜單未保持選中高亮
二，動態(tài)菜單接入后：
本博客中另一篇文章也簡單介紹了 iview 動態(tài)渲染顯示側邊欄菜單及獲取選中數據，渲染方法：
:menu-list="menuList"
主要是動態(tài)菜單接入后，菜單高亮選中就會失效
main.vue 的mounted中接口動態(tài)獲取菜單數據，渲染側邊欄菜單。
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";
<Sider
hide-trigger
collapsible
:width="200"
:collapsed-width="64"
v-model="collapsed"
class="left-sider"
:style="{overflow: 'hidden'}"
>
<side-menu
accordion
ref="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 權限實踐之動態(tài)顯示側邊欄菜單
2.vue+iView 跳轉子菜單父級菜單保持高亮
3.vue+iView 樹形菜單回顯與選中
4.vue+iView 實現(xiàn)導入與導出excel功能
5.vue+iView table分頁勾選記憶功能文章來源：http://www.zghlxwxcb.cn/news/detail-733733.html
喜歡就多多點贊關注。
文章來源地址http://www.zghlxwxcb.cn/news/detail-733733.html
到了這里，關于vue+iView 動態(tài)側邊欄菜單保持高亮選中的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
