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)擊瀏覽器的刷新之后頁面停留在原來的位置，但是導(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í)頁面依舊停留在原來位置，導(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)航和頁面同時(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.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法
下面小編就為大家分享一篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue自定義密碼輸入框解決瀏覽器自動(dòng)填充密碼的問題(最新方法)
這篇文章主要介紹了vue自定義密碼輸入框解決瀏覽器自動(dòng)填充密碼的問題,通過將密碼輸入框的type設(shè)置為text，修改樣式上的顯示，來實(shí)現(xiàn)既可以讓瀏覽器不自動(dòng)填充密碼，又可以隱藏密碼的效果，需要的朋友可以參考下2023-04-04
淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式
本篇文章主要介紹了淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式，本文將詳細(xì)介紹在Vue應(yīng)用程序中實(shí)現(xiàn)AJAX的四個(gè)方法，有興趣的可以了解一下2017-08-08
解決VUE自定義拖拽指令時(shí) onmouseup 與 click事件沖突問題
這篇文章主要介紹了解決VUE自定義拖拽指令時(shí) onmouseup 與 click事件沖突問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Element Input輸入框的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue+Django項(xiàng)目部署詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue中強(qiáng)制組件重新渲染的正確方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細(xì)介紹了Vue2單一事件管理組件通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例
今天小編就為大家分享一篇element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09