在WEB開發(fā)中，導(dǎo)航菜單作為網(wǎng)站的基礎(chǔ)組成部分，它是整個網(wǎng)站的結(jié)構(gòu)的體現(xiàn)，可以引導(dǎo)用戶快速選擇查找內(nèi)容。所以一個好的導(dǎo)航可以是必不可少的，它可以減少用戶跳出率、降低用戶時間成本、增加網(wǎng)站回頭率，提高網(wǎng)站流量、提升網(wǎng)站權(quán)重、增強(qiáng)用戶體驗。
在Element中提供了NavMenu組件可以為網(wǎng)站提供導(dǎo)航功能的菜單，這里我們主要來研究下側(cè)邊折疊導(dǎo)航欄菜單的功能實現(xiàn)，Element提供了一個簡單的示例，屬性我們可以參考Element官網(wǎng)的NavMenu 導(dǎo)航菜單說明：
簡單介紹下該示例，這里el-menu定義了當(dāng)前的導(dǎo)航菜單及屬性，el-submenu定義了子菜單欄，el-menu-item-group定義了菜單分組，el-menu-item為具體的菜單項，組件從上到下分別是：el-menu, el-submenu, el-menu-item-group, el-menu-item。在這里有個slot='title'的屬性，這代表什么意思呢？我們可以來看下el-submenu組件是怎么定義的。
在組件中我們可以看到有<slot name='title'></slot>元素，這是一個具名的< slot >（指定了slot='title'），可以用來定義額外的插槽，這樣父組件引用子組件時，含有屬性slot='title'標(biāo)簽內(nèi)的所有內(nèi)容將替代子組件的< slot >標(biāo)簽及它的內(nèi)容。 如果< slot >沒有使用name特性時它將作為默認(rèn)slot出現(xiàn)，父組件沒有使用slot特性的元素與內(nèi)容都將出現(xiàn)，如果沒定義默認(rèn)slot則父組件中沒有使用slot特性的元素與內(nèi)容不會顯示。
有了以上知識我們就可以開始構(gòu)建屬于自己的導(dǎo)航了，官方給我們展示的是固定的導(dǎo)航菜單，但在實際的項目開發(fā)中導(dǎo)航菜單大部分都是通過路由動態(tài)配置的，所以這里我們需要小小的改變下，在NavMenu中index 是菜單的唯一標(biāo)識符，當(dāng)啟用 vue-router 的模式時導(dǎo)航以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)。
在路由中有些路由是不需要在菜單中顯示的，比如注冊、登錄、找回、401、404、500等頁面，所以我們在定義路由的時候可以添加一個屬性來過濾掉不需要顯示的路由。
先來實現(xiàn)一個簡單的一級菜單，屏蔽掉含有hidden屬性的路由，然后通過routes方法我們先對路由進(jìn)行判斷，先獲取路由中的路由信息并將路由賦給subroutes，然后我們對路由個數(shù)進(jìn)行判斷，如果只有一條路由或者子路由為空時就返回真，拿到?jīng)]有子路由的對象我們就可以通過el-menu-item標(biāo)簽展示出來了。
因為還有子路由的菜單需要使用到el-submenu標(biāo)簽，它封裝了展開/收起箭頭。所以我們先從路由中提取出沒有子路由的對象，直接通過el-menu-item標(biāo)簽來實現(xiàn)即可。而沒有子菜單的菜單我們希望點擊時能只能跳轉(zhuǎn)路由，所以我們可以在el-menu-item外包裹個router-link標(biāo)簽，通過to屬性來指向?qū)?yīng)的路由。
接著我們繼續(xù)將含有子路由的菜單內(nèi)容提取出來，el-submenu是個菜單項沒有實際內(nèi)容，所以我們不需要對該項進(jìn)行跳轉(zhuǎn)。直接使用template標(biāo)簽實現(xiàn)即可。在顯示圖標(biāo)和標(biāo)題時我們最好先對路由進(jìn)行過濾，如果存在則顯示，不然容易報錯的。這時候我們只是獲取了一個帶有展開/收起箭頭的菜單項，里面沒有實際內(nèi)容的，要想在子菜單中顯示內(nèi)容我們就要在el-submenu通過el-menu-item標(biāo)簽實現(xiàn)。
這里問題就來了，在子菜單中也有沒有下級菜單的，所以我們在這里就需要再次對路由進(jìn)行層級判斷并重復(fù)之前的操作，而且我們也不知道路由會有幾層不可能不限的去嵌套，這里我們用到了vue的組件遞歸功能。就是組件可以在自己的模板中調(diào)用自身，遞歸必須定義name屬性（調(diào)用組件名和組件屬性name名需一致才能實現(xiàn)遞歸）而且一定要有結(jié)束條件，否則組件就會被循環(huán)引用最終出現(xiàn)“max stack size exceeded”的錯誤。
注意事項：
1，刷新定位當(dāng)前路由，需要在el-menu標(biāo)簽中定義:default-active='$route.path'，這樣當(dāng)你刷新路由時就會自動定位但當(dāng)前的路由位置。
2，el-submenu和el-menu-item標(biāo)簽中的index屬性定義，需要解析下路由將要跳轉(zhuǎn)的路由賦給index。
更多Vue實戰(zhàn)技巧可以參考我的專欄：Vue實戰(zhàn)系列
