vuejs 切换导航条高亮(路由菜单高亮)的方法示例

<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- item--active' : 'item-'">
 {{ item.title }}
 </p>
 <!-- 判断高亮表 -->
 <p :class="navIndex === index ? 'item-en item-en-active' : 'item-en'">
 {{ item.en }}
 </p>
</li>
</div>

// 导航条
data() {
 return {
 nav: [
  {title: '首页', en: 'Code', path: '/'},
  {title: '开源', en: 'Source', path: '/source'},
  {title: '关于', en: 'About', path: '/about'},
 ],
 navIndex: 0,
 }
},

/
  路由跳转
  @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);
 }
},

.nav-box {
 display: flex;
}

.nav-item {
 text-align: center;
 padding: 0 32px;
 position: relative;
 display: inline-block;
 font-size: 14px;
 line-height: 25px;
}

/导航普通状态/
.item- {
 color: #1c2438;
 font-weight: 800;
}

/导航普通状态/
.item-en {
 color: #666;
 font-size: 12px;
}

/导航高亮/
.item--active {
 color: #2d8cf0;
}

/导航高亮/
.item-en-active {
 color: #5cadff;
}

.nav-item:hover .item- {
 color: #2d8cf0;
}

.nav-item:hover .item-en {
 color: #5cadff;
}

.nav-item:after {
 position: absolute;
 right: 0;
 : 20px;
 content: '';
 width: 1px;
 height: 16px;
 background-color: #f8f8f8;
}

.nav-item:after:last-child {
 width: 0;
}