首頁 > web前端 > js教程 > 主體

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

亚连
發布: 2018-06-06 10:53:05
原創
1722 人瀏覽過

下面我就為大家分享一篇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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!