vue iview的菜单组件Mune 点击不高亮的解决方案


Posted in Javascript onNovember 01, 2019

前言: 在项目中,我用到了vue +iview + vue-router 开发; 然后导航条就使用了iview的Menu组件,结果发觉导航条的内容点击一次之后不会显示高亮样式,而是先跳转了,我再点击一次,才会高亮显示。

在看了vue-router的文档之后,发觉有一个很好用的东西,就是router-link的属性: active-class 和 exact。

为什么要使用router-link? 官网上说明了这几点好处:

组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 a 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

比起写死的 <a href="..." rel="external nofollow" > 会好一些,理由如下:

无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。

在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。

当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。

首先, active-class可以指定一个高亮时的样式, 比如我定义一个白色粗体的样式:

color: #fff;
  font-weight: bold;
  }

然后,就是exact,文档介绍是这样的

exact

类型: boolean

默认值: false

“是否激活” 默认类名的依据是 inclusive match (全包含匹配)。 举个例子,如果当前的路径是 /a 开头的,那么 也会被设置 CSS 类名。

按照这个规则,每个路由都会激活!想要链接使用 “exact 匹配模式”,则使用 exact 属性:

<!-- 这个链接只会在地址为 / 的时候被激活 --> <router-link to="/" exact>

在考虑到Menu组件的默认css可能会影响我的导航栏,所以我果断不用Menu组件,然后使用ul标签;最后,我的代码长这样:

<ul> 
<li> 
<router-link to="/" active-class="active" > 首页</roouter-link> 
</li> 
</ul>

然后,官网上还可以这样玩:

“` 
<router-link to="/" active-class="active" tag="li" ><a>首页</a></roouter-link>

 </ul>
```

以上这篇vue iview的菜单组件Mune 点击不高亮的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
ExtJS 入门
Oct 29 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
es6中比较有用的7个技巧小结
Jul 12 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 #Javascript
vue实现点击追加选中样式效果
Nov 01 #Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 #Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 #Javascript
微信js-sdk 录音功能的示例代码
Nov 01 #Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 #Javascript
vue实现计步器功能
Nov 01 #Javascript
You might like
深入分析php之面向对象
2013/05/15 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
javascript实现文件拖拽事件
2018/03/29 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
Python urlopen 使用小示例
2008/09/06 Python
关于反爬虫的一些简单总结
2017/12/13 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Python高斯消除矩阵
2019/01/02 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Python如何急速下载第三方库详解
2020/11/02 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
数控技术学生的自我评价
2014/02/15 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
Java死锁的排查
2022/05/11 Java/Android