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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
微信小程序实现刷脸登录
May 25 Javascript
layui动态表头的实现代码
Aug 22 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
VUE项目初建和常见问题总结
Sep 12 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更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
JS的反射问题
2010/04/07 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
js中eval详解
2012/03/30 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python操作SQLite简明教程
2014/07/10 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python运算符重载详解及实例代码
2017/03/07 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python Lambda函数使用总结详解
2019/12/11 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
Linux文件操作命令都有哪些
2016/07/23 面试题
给海归自荐信的建议
2013/12/13 职场文书
公民授权委托书
2014/10/15 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
捐书仪式主持词
2015/07/04 职场文书