溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦

發(fā)布時(shí)間:2021-06-26 14:27:23 來源:億速云 閱讀:347 作者:小新 欄目:web開發(fā)

這篇文章主要介紹vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

1本人在學(xué)vue項(xiàng)目時(shí)遇到一個(gè)坑、在寫vue項(xiàng)目頭部導(dǎo)航時(shí),比如點(diǎn)擊第三個(gè),刷新后,高亮狀態(tài)顯示在第一個(gè):

vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦

現(xiàn)在是點(diǎn)擊第三個(gè)頁面 刷新后,是第一個(gè)頁面高亮顯示,但是因?yàn)槁酚陕窂經(jīng)]有改變頁面內(nèi)容還是第三個(gè)頁面內(nèi)容,改變的是導(dǎo)航的狀態(tài);

vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦

捯飭了好久才搞出來,傷的不輕,看控制導(dǎo)航狀態(tài)的代碼部分;

vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦

在頭部組件里面控制導(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)把值傳給父頁面

vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦

2、父頁面接收傳過來的值;

vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦

3.在把接收的值傳給header子組件,子組件接收

vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦

以上是“vue項(xiàng)目刷新后導(dǎo)航菜單高亮顯示的位置不對(duì)怎么辦”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI