vue iview的菜单组件Mune 点击不高亮的解决方案

前言： 在项目中，我用到了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 点击不高亮的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现a标签点击高亮方法

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre

  • iview给radio按钮组件加点击事件的实例

    如下所示: <RadioGroup v-model="formValidate.phone"> <Radio label="phone">商家电话</Radio> <Radio label="leaderPhone">负责人电话</Radio> <span @click="inputPhone()"><Radio label="newPho

  • Vue-路由导航菜单栏的高亮设置方法

    如下所示: 默认情况下,路由的导航菜单,会自动给当前菜单添加router-link-exact-active 和router-link-active 类. 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名, 在路由规则配置中添加配置项linkActiveClass: 'mui-active',通过'mui-active'来自定义控制菜单栏切换样式 以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,

  • vue iview的菜单组件Mune 点击不高亮的解决方案

    前言: 在项目中,我用到了vue +iview + vue-router 开发: 然后导航条就使用了iview的Menu组件,结果发觉导航条的内容点击一次之后不会显示高亮样式,而是先跳转了,我再点击一次,才会高亮显示. 在看了vue-router的文档之后,发觉有一个很好用的东西,就是router-link的属性: active-class 和 exact. 为什么要使用router-link? 官网上说明了这几点好处: 组件支持用户在具有路由功能的应用中(点击)导航. 通过 to 属性指定目标

  • vue iview 隐藏Table组件里的某一列操作

    1.假设我要隐藏columns里的 "账户组名称" columns: [ { type: 'selection', width: 60, align: 'center' }, { title: '账号ID', key: 'accountIdString' }, { title: '账号名称', key: 'accountName' }, { title: '账户组名称', key: 'accountGroupName' }] 2.根据各自需求去判断 示例:如果是单账户表标题显示&quo

  • vue iView 上传组件之手动上传功能

    基于 Vue 的 UI 组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库,先上地址: https://github.com/iview/iview 官网是: https://www.iviewui.com/ 特性 使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量.功能丰富 友好的 API ,自由灵活地使用空间 详细.友好的

  • 原生Vue 实现右键菜单组件功能

    Vue 原生实现右键菜单组件, 零依赖 快速安装 npm install vue-contextmenujs 使用 测试中使用的是 element-ui 图标 import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); <template> <div id="app" style="width:100vw;height:100vh" @contextmenu

  • Vue下拉菜单组件化开发详解

    Vue下拉菜单组件化开发详解

    本文实例为大家分享了Vue下拉菜单组件化开发的具体代码,供大家参考,具体内容如下 搞一个自定义组件,只是一个很简单的下拉菜单,也就是一个思路,整起 第一步:在项目中专门创建一个放置自定义组件的文件夹(直接components底下的common中) dropdown.vue 为一级盒子 dropdownMenu.vue 为二级盒子 dropdownItem.vue 为二级盒子内容 第二步 : 对dropdown.vue的操作 <template> <div class="box&

  • Vue实现嵌套菜单组件

    Vue实现嵌套菜单组件

    本案例为大家分享了Vue实现嵌套菜单组件的具体代码,供大家参考,具体内容如下 本文旨在使用Vue.js完成一个嵌套的菜单组件,使用mock.js对数据进行模拟,并且最小化复现功能 安装mock cnpm i mockjs //引入mockjs import Mock from 'mockjs' //使用mockjs模拟数据 Mock.mock('/menuData', 'get', {     "ret": 0,     "data": [{            

  • vue+iview的菜单与页签的联动方式

    vue+iview的菜单与页签的联动方式

    vue+iview菜单与页签联动 最近在使用vue+iview开发一个后台管理类的系统,希望做一个点击左侧菜单右侧的页签与内容都能相对应的改变. 但搞了好久的路由也没有实现这个功能. 刚开始使用vue+iview不知道iview-admin可以直接拿来使用,布局之类的开箱即用,可是自己的demo已经写了好久不忍心放弃. 一.使用iview的menu和tab做布局,将这两个组件放到主页面 由于menu与tab的数据相同且样式需要进行关联,因此可以使用vuex进行状态管理,state中写入需要管理的

  • Vue.js手风琴菜单组件开发实例

    Vue.js手风琴菜单组件开发实例

    本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下 小图标是引入font-awesome字体图标库绘制的.效果如下图所示: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet"

  • vue下拉菜单组件（含搜索）的实现代码

    vue下拉菜单组件（含搜索）的实现代码

    之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 dropdown.vue <template> <div class="vue-dropdown default-theme"> <div class="cur-name" @click="isShow =! isShow">{{itemlist.cur.name}}</div> <div clas

  • vue+iview分页组件的封装

    vue+iview的分页组件封装 1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer { margin-right: 0; } } 3.index.js文件 import "./index.less"; import component from

随机推荐