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 相关文章推荐
Maps Javascript
Jan 22 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
js观察者模式的弹幕案例
Nov 23 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
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
PHP输出时间差函数代码
2013/01/28 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python中defaultdict的用法详解
2017/06/07 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
党员自我评价分享
2013/12/13 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
运动会稿件100字
2014/02/21 职场文书
超市采购员岗位职责
2015/04/07 职场文书
大学生受助感言
2015/08/01 职场文书
创业计划书之服装
2019/10/07 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android