vuejs 切换导航条高亮(路由菜单高亮)的方法示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vuejs 切换导航条高亮(路由菜单高亮)的方法示例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2148字,纯文字阅读大概需要4分钟。
内容图文
![vuejs 切换导航条高亮(路由菜单高亮)的方法示例](/upload/InfoBanner/zyjiaocheng/338/951d161d942f451ca6d69fba2c706d83.jpg)
我的GitHub前端经验总结,喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop
vuejs导航条高亮我的做法:
- 用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历
- 重点是在:routerLink(index, path)函数,传入当前点击的下标,自定义一个下标,判断是否相等就用三元符号判断多给一个高亮样式
- 如何解决刷新就不高亮或第一个高亮了,很简单,监听一下当前路由在判断就好了
具体代码都在下面了
效果图:
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的vuejs 切换导航条高亮(路由菜单高亮)的方法示例全部内容,希望文章能够帮你解决vuejs 切换导航条高亮(路由菜单高亮)的方法示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。