關(guān)于element?ui的菜單default-active默認(rèn)選中的問(wèn)題

更新時(shí)間：2022年05月23日 14:50:56 作者：Beam007

這篇文章主要介紹了關(guān)于element?ui的菜單default-active默認(rèn)選中的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element ui的菜單default-active默認(rèn)選中

代碼如下

<el-menu router :default-active="currentMenu" active-text-color="#7BE4FF" :unique-opened="true">
	// 此處navMenu 組件中:index="navMenu.sn"
	<navMenu :navMenus="menuData"></navMenu>
</el-menu>

watch: {
	'$route' (to, from) {
		this.getCurrentMenu()
	}
},
methods: {
	getCurrentMenu () {
		// 獲取當(dāng)前頁(yè)面 菜單刷新后能自動(dòng)選中
		let currentUrl = window.location.href
		let currentPage = currentUrl.split('/')[3].replace('#', '')
		this.currentMenu = currentPage
	}
}

問(wèn)題如下

切換菜單，中的navMenu.sn===default-active的值一致，選中高亮正常。

但是?。?/p>

后退到首頁(yè)，菜單樹(shù)里navMenu.sn沒(méi)有首頁(yè)home這個(gè)路由，navMenu.sn!==default-active選中前一個(gè)高亮始終不變。

照理說(shuō)，navMenu.sn!==default-active不應(yīng)該選中高亮菜單才對(duì)。

于是思考

1、確認(rèn):index="navMenu.sn"的值和:default-active="currentMenu"的值是一致的

2、確認(rèn)菜單樹(shù)所有的navMenu.sn全部存在且唯一的

3、確認(rèn)樹(shù)生成在前，給default-active賦值再后，可以通過(guò)setTimeout延遲改變currentMenu的值，發(fā)現(xiàn)若改成存在的菜單，選中高亮正常，若設(shè)置為空或不存在的菜單，選中高亮停留在前一個(gè)。

4、官方文檔NavMenu導(dǎo)航菜單有一個(gè)回調(diào)事件，select：菜單激活回調(diào)，index: 選中菜單項(xiàng)的 index, indexPath: 選中菜單項(xiàng)的 index path，按照例子的寫(xiě)法加了之后，問(wèn)題仍然存在。

5、手上兩個(gè)系統(tǒng)，同樣的用到了element ui的NavMenu導(dǎo)航菜單，一個(gè)存在問(wèn)題一個(gè)不存在。

對(duì)比代碼發(fā)現(xiàn)沒(méi)有什么不同，費(fèi)解。