在vue-router中配合ElementUI如何實作導航

下面我就為大家分享一篇vue-router配合ElementUI實現導航的實例，具有很好的參考價值，希望對大家有所幫助。

在每個專案中路由是不可或缺的，最近學習vue-router和ElementUI配合使用實作導覽欄，在學習的過程中遇到一個問題：點擊瀏覽器的刷新之後頁面停留在原來的位置，但是導航卻是預設第一個。

由於接觸前端時間不長，對於路由的概念不是特別清楚，按照文檔寫了之後完全不知道怎麼下手了，請教了同事，同事的解決辦法是利用vuex管理，但是vuex這塊還沒接觸過，所以這個問題就一直擱置了，今天週末自己在家學習偶然直到了可以使用$route.path設置默認選中的導航，但是設置之後沒有什麼效果，刷新時頁面依舊停留在原來位置，導航卻一個都沒有選中，查了半天資料也沒有找到答案，後來和網上的一個例子進行對比，發現

default-active="$route.path"

前面還需要添加綁定符號，如下：

:default-active="$route.path"

如此設定之後就可以實現導航和頁面同時變化了。

導航的完整程式碼請看這裡：

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在vue.js中詳細解讀this.$emit的使用方法

在vue中如何實作密碼顯示隱藏切換功能

在Vue中如何使用父元件呼叫子元件事件

以上是在vue-router中配合ElementUI如何實作導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！