快捷導(dǎo)航

解決vue-router 二級(jí)導(dǎo)航默認(rèn)選中某一選項(xiàng)的問(wèn)題

更新時(shí)間：2019年11月01日 16:39:17 作者：versionli

今天小編就為大家分享一篇解決vue-router 二級(jí)導(dǎo)航默認(rèn)選中某一選項(xiàng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

現(xiàn)在有一個(gè)需求是這樣的：

這個(gè)需求很正常吧！二級(jí)導(dǎo)航條，不是二級(jí)路由的（如果是二級(jí)路由是用linkActiveClass來(lái)做，我之前文章說(shuō)過(guò)），是單純獲取數(shù)據(jù)的按鈕，當(dāng)這個(gè)頁(yè)面出現(xiàn)時(shí)，默認(rèn)選中第一項(xiàng)。

首先：

上面的判斷的意思是：如果你點(diǎn)擊某一個(gè)選項(xiàng)把這個(gè)index傳過(guò)去，activeName等于那一個(gè)傳過(guò)來(lái)的index(index是遍歷出來(lái)的數(shù)據(jù)如:1,2,3,4,5),就顯示該個(gè)active或者index==pid，pid默認(rèn)為0，所以index==0,就是默認(rèn)第一個(gè)選項(xiàng)被選中。

但是當(dāng)我點(diǎn)擊其它項(xiàng)的時(shí)候，要把那個(gè)pid改為false，只能把這個(gè)false賦值給uid,uid卻不能在data里而聲明，因?yàn)榻M件遍歷v-for是時(shí)候就默認(rèn)執(zhí)行了selected()這個(gè)函數(shù)，所以只能把這個(gè)賦值給全局

我目前只能用這個(gè)方法解決這個(gè)問(wèn)題，如果有更好的方法，希望可以共享一下

以上這篇解決vue-router 二級(jí)導(dǎo)航默認(rèn)選中某一選項(xiàng)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中使用elementUI組件手動(dòng)上傳圖片功能
Vue是一套構(gòu)建用戶界面的框架，開(kāi)發(fā)只需要關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下
2019-12-12
解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作
這篇文章主要介紹了解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
使用vue/cli出現(xiàn)defineConfig?is?not?function錯(cuò)誤解決辦法
這篇文章主要給大家介紹了關(guān)于使用vue/cli出現(xiàn)defineConfig?is?not?function錯(cuò)誤的解決辦法,當(dāng)我們?cè)谧龃虬渲玫臅r(shí)候,出現(xiàn)了這個(gè)錯(cuò)誤,需要的朋友可以參考下
2023-11-11
Vue實(shí)現(xiàn)頁(yè)面的局部刷新(router-view頁(yè)面刷新)
本文主要介紹了Vue實(shí)現(xiàn)頁(yè)面的局部刷新(router-view頁(yè)面刷新)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
Vue 圖片壓縮并上傳至服務(wù)器功能
這篇文章主要介紹了Vue 圖片壓縮并上傳至服務(wù)器功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開(kāi)發(fā)中經(jīng)常會(huì)遇到跨組件通信的場(chǎng)景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡(jiǎn)單的跨組件通信的一些方法,文中通過(guò)代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下
2023-11-11
vue模塊移動(dòng)組件的實(shí)現(xiàn)示例
這篇文章主要介紹了vue模塊移動(dòng)組件的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車案例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue的Virtual Dom實(shí)現(xiàn)snabbdom解密
這篇文章主要介紹了vue的Virtual Dom實(shí)現(xiàn)- snabbdom解密，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
nuxt.js 在middleware(中間件)中實(shí)現(xiàn)路由鑒權(quán)操作
這篇文章主要介紹了nuxt.js 在middleware(中間件)中實(shí)現(xiàn)路由鑒權(quán)操作，具有很好的參考價(jià)值，希望大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11