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

发布时间：2020-12-17 03:12:38 所属栏目：百科来源：网络整理

导读：我的GitHub前端经验总结，喜欢的话请点star:Thanks.: vuejs导航条高亮我的做法：用一个数组存导航条，用v-for循环它，这样可以减少代码，二可以使用它的下标来判断高亮，三还可以获取后端的导航信息来遍历重点是在：routerLink(index,path)函数，传入当前

我的GitHub前端经验总结，喜欢的话请点star:Thanks.:

vuejs导航条高亮我的做法：

用一个数组存导航条，用v-for循环它，这样可以减少代码，二可以使用它的下标来判断高亮，三还可以获取后端的导航信息来遍历
重点是在：routerLink(index,path)函数，传入当前点击的下标，自定义一个下标，判断是否相等就用三元符号判断多给一个高亮样式
如何解决刷新就不高亮或第一个高亮了，很简单，监听一下当前路由在判断就好了

具体代码都在下面了

效果图：

html代码

<p :class=" navIndex === index ? 'item-cn item-cn-active' : 'item-cn'">
{{ item.title }}

data数据

methods方法：

item.path === path); }

监听路由变化获取当前路由

css样式

.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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!