我的GitHub前端經(jīng)驗(yàn)總結(jié),喜歡的話請(qǐng)點(diǎn)star:Thanks.: https://github.com/liangfengbo/frontend-develop
乳山網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,乳山網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為乳山上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的乳山做網(wǎng)站的公司定做!
vuejs導(dǎo)航條高亮我的做法:
具體代碼都在下面了
效果圖:
html代碼
<div class="nav-box"> <!-- 導(dǎo)航列表 --> <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>
data數(shù)據(jù)
// 導(dǎo)航條 data() { return { nav: [ {title: '首頁', en: 'Code', path: '/'}, {title: '開源', en: 'Source', path: '/source'}, {title: '關(guān)于', en: 'About', path: '/about'}, ], navIndex: 0, } },
methods方法:
/** * 路由跳轉(zhuǎn) * @param index * @param link */ routerLink(index, path) { // 點(diǎn)擊哪個(gè)路由就賦值給自定義的下下標(biāo) this.navIndex = index; // 路由跳轉(zhuǎn) this.$router.push(path) }, /** * 檢索當(dāng)前路徑 * @param path */ checkRouterLocal(path) { // 查找當(dāng)前路由下標(biāo)高亮 this.navIndex = this.nav.findIndex(item => item.path === path); }
監(jiān)聽路由變化獲取當(dāng)前路由
watch: { "$route"() { // 獲取當(dāng)前路徑 let path = this.$route.path; // 檢索當(dāng)前路徑 this.checkRouterLocal(path); } },
css樣式
.nav-box { display: flex; } .nav-item { text-align: center; padding: 0 32px; position: relative; display: inline-block; font-size: 14px; line-height: 25px; } /*導(dǎo)航普通狀態(tài)*/ .item-cn { color: #1c2438; font-weight: 800; } /*導(dǎo)航普通狀態(tài)*/ .item-en { color: #666; font-size: 12px; } /*導(dǎo)航高亮*/ .item-cn-active { color: #2d8cf0; } /*導(dǎo)航高亮*/ .item-en-active { color: #5cadff; } .nav-item:hover .item-cn { color: #2d8cf0; } .nav-item:hover .item-en { color: #5cadff; } .nav-item:after { position: absolute; right: 0; top: 20px; content: ''; width: 1px; height: 16px; background-color: #f8f8f8; } .nav-item:after:last-child { width: 0; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站題目:vuejs切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
本文鏈接:http://muchs.cn/article36/pipgpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、網(wǎng)站排名、云服務(wù)器、微信公眾號(hào)、虛擬主機(jī)、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)