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


Posted in Javascript onMay 29, 2018

我的GitHub前端经验总结,喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop

vuejs导航条高亮我的做法:

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

具体代码都在下面了

效果图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
详谈javascript中的cookie
Jun 03 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
TypeScript入门-接口
Mar 30 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 #Javascript
Vue 全局loading组件实例详解
May 29 #Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 #Javascript
详解vue-cli项目中怎么使用mock数据
May 29 #Javascript
js统计页面上每个标签的数量实例代码
May 29 #Javascript
浅谈React的最大亮点之虚拟DOM
May 29 #Javascript
深入理解Vue Computed计算属性原理
May 29 #Javascript
You might like
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
基python实现多线程网页爬虫
2015/09/06 Python
深入理解python多进程编程
2016/06/12 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Python库安装速度过慢解决方案
2020/07/14 Python
python实现粒子群算法
2020/10/15 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
生产部经理岗位职责
2013/12/16 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
异地恋情人节寄语
2015/02/28 职场文书
四年级语文教学反思
2016/03/03 职场文书