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 form action动态修改方法
Nov 04 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
ES6 更易于继承的类语法的使用
Feb 11 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工厂模式
2014/11/25 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python实现视频分帧效果
2019/05/31 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
详解python tkinter 图片插入问题
2020/09/03 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
传播学毕业生求职信
2013/10/11 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
电力培训学习心得体会
2016/01/11 职场文书