vue-router配合ElementUI實現(xiàn)導(dǎo)航的實例
更新時間：2018年02月11日 09:46:19 作者：Lily900923
下面小編就為大家分享一篇vue-router配合ElementUI實現(xiàn)導(dǎo)航的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在每個項目中路由是不可或缺的，最近學(xué)習(xí)vue-router和ElementUI配合使用實現(xiàn)導(dǎo)航欄，在學(xué)習(xí)的過程中遇到一個問題：點擊瀏覽器的刷新之后頁面停留在原來的位置，但是導(dǎo)航卻是默認(rèn)第一個。
由于接觸前端時間不長，對于路由的概念不是特別清楚，按照文檔寫了之后完全不知道怎么下手了，請教了同事，同事的解決辦法是利用vuex管理，但是vuex這塊還沒有接觸過，所以這個問題就一直擱置了，今天周末自己在家學(xué)習(xí)偶然直到了可以使用$route.path設(shè)置默認(rèn)選中的導(dǎo)航，但是設(shè)置之后沒有什么效果，刷新時頁面依舊停留在原來位置，導(dǎo)航卻一個都沒有選中，查了半天資料也沒有找到答案，后來和網(wǎng)上的一個例子進(jìn)行對比，發(fā)現(xiàn)
default-active="$route.path"
前面還需要添加綁定符號，如下：
:default-active="$route.path"
如此設(shè)置之后就可以實現(xiàn)導(dǎo)航和頁面同時變化了。
導(dǎo)航的完整代碼請看這里：
<template>
<div id="app">
<el-col :span="4">
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
theme="dark"
router>
<el-menu-item index="/upload_img">圖片上傳</el-menu-item>
<el-menu-item index="/upload_video">視頻上傳</el-menu-item>
<el-menu-item index="/https">網(wǎng)絡(luò)請求</el-menu-item>
<el-menu-item index="/other">其他</el-menu-item>
</el-menu>
</el-col>
<router-view></router-view>
</div>
</template>
以上這篇vue-router配合ElementUI實現(xiàn)導(dǎo)航的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue keep-alive 數(shù)據(jù)更新的問題
今天小編就為大家分享一篇解決vue keep-alive 數(shù)據(jù)更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue輸入框狀態(tài)切換&自動獲取輸入框焦點的實現(xiàn)方法
這篇文章主要介紹了Vue輸入框狀態(tài)切換&自動獲取輸入框焦點的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
最近遇到一個需求,需要把內(nèi)容下載生成pdf文件,但轉(zhuǎn)換過程中內(nèi)容總是會被截斷,就很難受,從網(wǎng)上找到了解決辦法分享給大家,這篇文章主要給大家介紹了關(guān)于vue生成pdf文件步驟及pdf分頁隔斷處理的相關(guān)資料,需要的朋友可以參考下2024-02-02
在現(xiàn)代Web開發(fā)中,瀏覽器兼容性是一個重要的問題,盡管大多數(shù)用戶已經(jīng)轉(zhuǎn)向了現(xiàn)代瀏覽器,但仍有一部分用戶可能仍在使用老舊的瀏覽器版本,本文將詳細(xì)介紹如何在Vue項目中實現(xiàn)低版本瀏覽器升級提示,并通過多個代碼示例來展示不同的應(yīng)用場景和技術(shù)點,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue 實現(xiàn)超長文本截取,懸浮框提示，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue項目實例中用query傳參如何實現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項目實例中用query傳參如何實現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue仿網(wǎng)易云音樂播放器界面的簡單實現(xiàn)過程
興趣乃學(xué)習(xí)的動力,想自己動手寫個音樂播放器,查了網(wǎng)上一些博客寫了一個,這篇文章主要給大家介紹了關(guān)于vue仿網(wǎng)易云音樂播放器界面的簡單實現(xiàn)過程,需要的朋友可以參考下2021-11-11
這篇文章主要為大家介紹了手寫一個vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了vue中post請求報400的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vant?Weapp組件picker選擇器初始默認(rèn)選中問題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01