在使用element-ui的導航組件時遇到的bug，elmenu.items的key值不對的問題

在使用element-ui的導航組件時遇到的bug，elmenu.items的key值不對的問題

如果我們在頁面布局的時候使用的是這樣的布局，主菜單向子菜單傳遞的時候，element頁面渲染沒有問題，當加上process這種tab標簽，並且點擊這個tab標簽相應的子菜單要激活，這個bug就來了。

原因是elment組件在設置items的時候莫名其妙的更新錯了，保留了之前的key值，items里面的這個key值是用組件上綁定的index值設定的，激活態activeIndex也和這個key有關。

這時候只能自己手動改過來。

1.先給這個el-menu一個ref

<div class="whr-side-menu">
				<el-menu
					ref="aside_menu"
					class="el-menu-vertical-demo"
					:default-active="$route.path"
				>
					<menutree :menu="somenu"></menutree>
				</el-menu>
			</div>

2.點擊主菜單的時候，把子菜單（children）傳遞給側邊欄子菜單。

1.somenu就是這個傳遞的值，講道理的話，應該到此就完事了。誰也想不到會產生那個莫名其妙的bug。

2.把正確的key值手動付給items，就是下面的代碼，用這個$set()我注釋的那一段也可以，不過沒必要，因為activeIndex依然不會變（之后會講到）。

toSideMenu(children) {
			let that = this;
			this.somenu = children;
			let keymap = new Map();
			setTimeout(function () {
				for (let iterator in that.$refs.aside_menu.items) {
					keymap.set(
						iterator,
						that.$refs.aside_menu.items[iterator].index
					);
					// that.$set(
					// 	that.$refs.aside_menu.items,
					// 	keymap.get(iterator),
					// 	that.$refs.aside_menu.items[iterator]
					// );
					that.$refs.aside_menu.items[keymap.get(iterator)] =
						that.$refs.aside_menu.items[iterator];
					delete that.$refs.aside_menu.items[iterator];
				}
			}, 200);
		},

3.手動給activeIndex賦值，改變側邊欄導航的激活態

PubSub.subscribe("setAciveIndex", (msg, item) => {
			that.$set(that.$refs.aside_menu, "activeIndex", item);
		});

item就是對應的路由

好了，這樣就解決了。這個bug我解決了好久，開始以為自己傳值有問題，可是這么簡單點事能出什么問題呢？

不過后面我要講的，手動渲染遞歸導航菜單可以避開的這個問題。

后面講vue element-ui 導航菜單的遞歸渲染。