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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
Vue多系统切换实现方案
Jun 05 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
微信小程序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
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP 选项及相关信息函数库
2006/12/04 PHP
php5 图片验证码实现代码
2009/12/11 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
常见的浏览器Hack技巧整理
2017/06/29 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
Express系列之multer上传的使用
2017/10/27 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
故宫导游词
2015/01/31 职场文书
交通事故代理词范文
2015/05/23 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书