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实现计算代码行数的简单方法附代码
Aug 13 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
详解vue 图片上传功能
Apr 30 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php session_start()出错原因分析及解决方法
2013/10/28 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
php接口隔离原则实例分析
2019/11/11 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中 logging的使用详解
2017/10/25 Python
Python 加密与解密小结
2018/12/06 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
python中如何设置代码自动提示
2020/07/15 Python
python Scrapy框架原理解析
2021/01/04 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
孝敬父母的演讲稿
2014/05/14 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
2015年教师节感言
2015/08/03 职场文书
电力培训学习心得体会
2016/01/11 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript
python中对列表的删除和添加方法详解
2022/02/24 Python