解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對(duì)問題
更新時(shí)間：2019年11月01日 17:25:51 作者：倚樓聽風(fēng)雨的行者
今天小編就為大家分享一篇解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對(duì)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
1本人在學(xué)vue項(xiàng)目時(shí)遇到一個(gè)坑、在寫vue項(xiàng)目頭部導(dǎo)航時(shí)，比如點(diǎn)擊第三個(gè)，刷新后，高亮狀態(tài)顯示在第一個(gè)：
現(xiàn)在是點(diǎn)擊第三個(gè)頁面 刷新后，是第一個(gè)頁面高亮顯示，但是因?yàn)槁酚陕窂經(jīng)]有改變頁面內(nèi)容還是第三個(gè)頁面內(nèi)容，改變的是導(dǎo)航的狀態(tài)；
捯飭了好久才搞出來，傷的不輕，看控制導(dǎo)航狀態(tài)的代碼部分；
在頭部組件里面控制導(dǎo)航菜單高亮顯示是checkindex,默認(rèn)值是0，觸發(fā)點(diǎn)擊事件contact時(shí)候會(huì)重新賦值，跳轉(zhuǎn)路由，一旦刷新頁面，這個(gè)checkindex的值就是0，所以要把這個(gè)checkindex值記錄下來，時(shí)刻監(jiān)聽到變化；利用到vue的父子和子父?jìng)髦?；監(jiān)聽狀態(tài)的變化
1、子頁面把狀態(tài)把值傳給父頁面
2、父頁面接收傳過來的值；
3.在把接收的值傳給header子組件，子組件接收
以上這篇解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對(duì)問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue中的keep-alive，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本文主要介紹了ElementUI表格中添加表頭圖標(biāo)懸浮提示，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue使用electron生成桌面應(yīng)用過程，很想使用 electron 制作一個(gè)桌面應(yīng)用，但是真的上手使用的時(shí)候才發(fā)現(xiàn) electron 的坑實(shí)在是太多了，先將遇到的坑記錄在這里，遇到一個(gè)記錄一個(gè)2023-04-04
vue項(xiàng)目main.js使用方法詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目main.js使用方法的相關(guān)資料,main.js文件是程序的入口文件,加載各種公共組件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了使用Vite處理css?less及postcss的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作
這篇文章主要介紹了VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue中axios的使用與封裝，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue引入高德地圖并繪制點(diǎn)線面的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
vue+iview的菜單與頁簽的聯(lián)動(dòng)方式
這篇文章主要介紹了vue+iview的菜單與頁簽的聯(lián)動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07