溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我的GitHub前端經驗總結，喜歡的話請點star:Thanks.: https://github.com/liangfengbo/frontend-develop
vuejs導航條高亮我的做法：
具體代碼都在下面了
效果圖：
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>
data數據
// 導航條
data() {
return {
nav: [
{title: '首頁', en: 'Code', path: '/'},
{title: '開源', en: 'Source', path: '/source'},
{title: '關于', en: 'About', path: '/about'},
],
navIndex: 0,
}
},
methods方法：
/**
* 路由跳轉
* @param index
* @param link
*/
routerLink(index, path) {
// 點擊哪個路由就賦值給自定義的下下標
this.navIndex = index;
// 路由跳轉
this.$router.push(path)
},
/**
* 檢索當前路徑
* @param path
*/
checkRouterLocal(path) {
// 查找當前路由下標高亮
this.navIndex = this.nav.findIndex(item => item.path === path);
}
監聽路由變化獲取當前路由
watch: {
"$route"() {
// 獲取當前路徑
let path = this.$route.path;
// 檢索當前路徑
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;
}
/*導航普通狀態*/
.item-cn {
color: #1c2438;
font-weight: 800;
}
/*導航普通狀態*/
.item-en {
color: #666;
font-size: 12px;
}
/*導航高亮*/
.item-cn-active {
color: #2d8cf0;
}
/*導航高亮*/
.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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
