解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對(duì)問(wèn)題
1本人在學(xué)vue項(xiàng)目時(shí)遇到一個(gè)坑、在寫(xiě)vue項(xiàng)目頭部導(dǎo)航時(shí)，比如點(diǎn)擊第三個(gè)，刷新后，高亮狀態(tài)顯示在第一個(gè)：
現(xiàn)在是點(diǎn)擊第三個(gè)頁(yè)面 刷新后，是第一個(gè)頁(yè)面高亮顯示，但是因?yàn)槁酚陕窂經(jīng)]有改變頁(yè)面內(nèi)容還是第三個(gè)頁(yè)面內(nèi)容，改變的是導(dǎo)航的狀態(tài)；
捯飭了好久才搞出來(lái)，傷的不輕，看控制導(dǎo)航狀態(tài)的代碼部分；
在頭部組件里面控制導(dǎo)航菜單高亮顯示是checkindex,默認(rèn)值是0，觸發(fā)點(diǎn)擊事件contact時(shí)候會(huì)重新賦值，跳轉(zhuǎn)路由，一旦刷新頁(yè)面，這個(gè)checkindex的值就是0，所以要把這個(gè)checkindex值記錄下來(lái)，時(shí)刻監(jiān)聽(tīng)到變化；利用到vue的父子和子父?jìng)髦?；監(jiān)聽(tīng)狀態(tài)的變化
1、子頁(yè)面把狀態(tài)把值傳給父頁(yè)面
2、父頁(yè)面接收傳過(guò)來(lái)的值；
3.在把接收的值傳給header子組件，子組件接收
以上這篇解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對(duì)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue.js的開(kāi)發(fā)過(guò)程中,組件方法的定義和調(diào)用是非常常見(jiàn)的,有時(shí)候,為了響應(yīng)事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細(xì)的代碼示例和解釋,幫助開(kāi)發(fā)者更好地理解和應(yīng)用這些技術(shù)2024-09-09
Vue分頁(yè)組件實(shí)現(xiàn)過(guò)程詳解
Web應(yīng)用程序中資源分頁(yè)不僅對(duì)性能很有幫助，而且從用戶體驗(yàn)的角度來(lái)說(shuō)也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁(yè)組件2022-12-12
Vue狀態(tài)管理庫(kù)Vuex的入門(mén)使用教程
Vuex是一個(gè)專門(mén)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理庫(kù)。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易2023-03-03
vue 代碼高亮插件全面對(duì)比測(cè)評(píng)
這篇文章主要介紹了vue 代碼高亮插件全面對(duì)比測(cè)評(píng)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示
這篇文章主要介紹了Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue CLI3中使用compass normalize的方法
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Vue事件獲取事件對(duì)象之event.currentTarget詳解
這篇文章主要介紹了Vue事件獲取事件對(duì)象之event.currentTarget,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目退出登錄清除store數(shù)據(jù)的三種方法
最近使用vue做用戶的登錄/退出,在開(kāi)發(fā)過(guò)程中遇到的一些問(wèn)題,記錄下來(lái),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目退出登錄清除store數(shù)據(jù)的三種方法,需要的朋友可以參考下2022-09-09
VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能，本文通過(guò)兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用
本文主要介紹了Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04