vue中使用element-ui的menu選中項高亮的問題


在使用element中的menu組件時,根據官方文檔,可以設置給el-menu設置router屬性為:true,給el-menu-item設置index的值為路徑,就可以實現點擊導航跳轉到指定路由。

  這樣做雖然能實現跳轉,但是,若刷新瀏覽器,則導航會跳轉到默認的選中項,而不是我們離開時的導航。

     百度時大部分回答是將default-active屬性設置為:$route.path,這樣頁面重新渲染時就會選中當前的路由了。可是,解決了刷新的問題,還有一個從頁面上的按鈕跳轉到其他頁面的問題,比如導航列表:a路由(導航一)、b路由(導航二),從b可以跳轉c,跳轉到c時,導航欄選中的應該是導航二,然而設置為$route.path 后,此時因為路由變了,找不到與index匹配的路由了,導航欄就不會再高亮了。

  仔細讀element官網上的menu屬性,發現還有一個屬性沒用上,就是el-menu-item的router屬性,它的值是vue router對象,通過嘗試發現:default-active匹配的是index值,當將el-menu的router屬性設置為true時,跳轉的路由如果沒有設置route,則使用的是index的值,如果寫了route,則路由使用的是route的值,通過這一點兒特性,於是想了一個辦法:

  在router.js里設置路由時,給相同導航高亮的路由設置相同的name屬性,如圖:

 

 

然后在menu組件上設置default-active的值為:$route.name,這樣就可以實現刷新時導航欄選中當前頁的問題。最后設置el-menu-item的index屬性為router.js文件里跳轉路由的name值,route屬性為:路由的path,如圖:

 

 通過這樣設置,就可以實現刷新頁面時,導航欄的選中項和頁面顯示一致,並且從b頁面跳轉到c頁面時,還能保持b選中的狀態。

效果圖如下:

 

 

 

 

 

 最后點擊去“child1”的按鈕,跳轉到child1,導航欄會自動選中到導航一。

至此,刷新問題和跳轉頁面時導航欄的選中問題就解決了。

 

-------------------------------------------------------------------------------------分割線------------------------------------------------------------------------------------------

剛又想了另外一種方法,與上述方法有異曲同工之妙,哈哈哈哈!

先將路由這樣修改:

 

 這樣name屬性不用一致了,只需要設置需要高亮相同導航欄的路由的路徑有相同的路徑,如:"/two/*",然后設置menu組件上的參數:

 

 default-active有計算屬性getActive得到,如下圖:

 

 這樣設置之后,也可以達到上述的效果。

原文地址:https://www.cnblogs.com/liuqin-always/p/11603708.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM