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 相关文章推荐
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
JS手写一个自定义Promise操作示例
Mar 16 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
js实现简单扫雷
2020/11/27 Javascript
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python Map 函数的使用
2020/08/28 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
小学教师事迹材料
2014/01/13 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
陈欧广告词
2014/03/14 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
环保建议书200字
2014/05/14 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
国庆节慰问信
2015/02/15 职场文书
摩登时代观后感
2015/06/03 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL