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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
Vue实现背景更换颜色操作
Jul 17 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
解决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
怎样辨别一杯好咖啡
2021/03/03 新手入门
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
php图像生成函数之间的区别分析
2012/12/06 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
微信小程序生成二维码的示例代码
2019/03/29 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python面向对象 反射原理解析
2019/08/12 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Python中Qslider控件实操详解
2021/02/20 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
中学生演讲稿
2014/04/26 职场文书
社区义诊活动总结
2014/04/30 职场文书
片区教研活动总结
2014/07/02 职场文书
公司员工离职证明书
2014/10/04 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js