vuejs切换导航条⾼亮（路由菜单⾼亮）的⽅法⽰例vuejs导航条⾼亮我的做法： 1. ⽤⼀个数组存导航条，⽤v-for循环它，这样可以减少代码，⼆可以使⽤它的下标来判断⾼亮，三还可以获取后端的导航 信息来遍历
2. 重点是在：routerLink(index, path)函数，传⼊当前点击的下标，⾃定义⼀个下标，判断是否相等就⽤三元符号判断多给
⼀个⾼亮样式
3. 如何解决刷新就不⾼亮或第⼀个⾼亮了，很简单，监听⼀下当前路由在判断就好了
具体代码都在下⾯了
效果图：
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'">
{{ }}
</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;
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议