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