vuejs切換導航條高亮(路由菜單高亮)的方法示例-創(chuàng)新互聯

我的GitHub前端經驗總結，喜歡的話請點star:Thanks.: https://github.com/liangfengbo/frontend-develop

創(chuàng)新互聯公司專業(yè)為企業(yè)提供孝昌網站建設、孝昌做網站、孝昌網站設計、孝昌網站制作等企業(yè)網站建設、網頁設計與制作、孝昌企業(yè)網站模板建站服務，十載孝昌做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

vuejs導航條高亮我的做法：

1. 用一個數組存導航條，用v-for循環(huán)它，這樣可以減少代碼，二可以使用它的下標來判斷高亮，三還可以獲取后端的導航信息來遍歷
2. 重點是在：routerLink(index, path)函數，傳入當前點擊的下標，自定義一個下標，判斷是否相等就用三元符號判斷多給一個高亮樣式
3. 如何解決刷新就不高亮或第一個高亮了，很簡單，監(jiān)聽一下當前路由在判斷就好了

具體代碼都在下面了

效果圖：

html代碼

<div class="nav-box">

<!-- 導航列表 -->
<li class="nav-item"
 v-for="(item, index) in nav"
 @click="routerLink(index, item.path)"
 :key="index">
 <!-- 判斷高亮表 -->
 <p :class=" navIndex === index ? 'item-cn item-cn-active' : 'item-cn'">
 {{ item.title }}
 </p>
 <!-- 判斷高亮表 -->
 <p :class="navIndex === index ? 'item-en item-en-active' : 'item-en'">
 {{ item.en }}
 </p>
</li>
</div>

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目：vuejs切換導航條高亮(路由菜單高亮)的方法示例-創(chuàng)新互聯
地址分享：http://muchs.cn/article10/dshpgo.html

成都網站建設公司_創(chuàng)新互聯，為您提供外貿建站、網站收錄、小程序開發(fā)、服務器托管、網站建設、網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯