elementui中导航menu高亮变色问题

比眉伴天荒 2022-04-10 01:27 351阅读 0赞

elementui中导航menu高亮变色问题

<el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>

首先看上面这段代码 当点击 选项3 则跳转 也会高亮 但是如果某些页面内部写了 诸如:

<el-button @click="handleClick">跳转</el-button>
          handleClick() {
                 this.$router.push({path: '/Rights"});
            }

两种不同的路由跳转 跳到左侧导航的页面, 左侧导航列表的对应的项 应该高亮,怎么才可以高亮  
这就涉及到了 linkActiveClass: ‘active’, 在路由那index.js里面配置  
还有css样式需要在导航页配置 一个.active\{\} 这是路由跳转的样式 或者 .router-link-active\{\} 这是配置的高亮,还必须干掉原有的.is-active样式(这是elementui提供的)  
所以上面代码改装一下

<el-menu-item-group title="分组2">
              <el-menu-item index="/Role">
              	<router-link to:"/Role">角色</router-link>
              </el-menu-item>
                <el-menu-item index="/Rights">
              	<router-link to:"/Rights">权限</router-link>
              </el-menu-item>
      </el-menu-item-group>

代码改装完成,这就可以了,  
三点: 1.改装导航成router-link这种形式  
2.改装导航样式,干掉原有的.is-active,改写router-link-active的或者.active  
3.记得在配置路由的那加上linkActiveClass: ‘active’,或者 linkExactActiveClass: ‘active’,

发表评论取消回复

表情：

评论列表（有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

相关如何让帝国cms前台代码高亮显示或变色显示

我们都知道帝国cms默认编辑框不能让代码高亮显示，感觉很loser，那么我们如何让代码变色显示呢？我们可以通过百度编辑器来实现首先我们需要把帝国cms的默认编辑器更换成百度

小咪咪/ 2024年03月22日 17:36/ 0 赞/ 80 阅读

相关 Vue+elementUI动态渲染折叠导航el-menu

这是[官网上对折叠菜单的示例][Link 1]： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

太过爱你忘了你带给我的痛/ 2023年07月24日 08:21/ 0 赞/ 62 阅读

相关 vue element-ui menu导航

menu组件使用 html <el-menu :default-active="activeIndex" class="el-me

灰太狼/ 2023年02月13日 04:00/ 0 赞/ 44 阅读

相关 php js导航高亮显示,js实现当前导航菜单高亮显示

为了增加用户体验度，增加网页的易用性和美观度，往往需要把当前导航菜单以特殊方式显示，通常是高亮显示或有不同于其它菜单的背景，有两种方法可以实现，第一种是用纯css来实现，二是

短命女/ 2023年01月17日 08:25/ 0 赞/ 210 阅读

相关 vue element menu侧边导航栏

<template>  <!--unique

港控/mmm°/ 2022年10月29日 14:25/ 0 赞/ 73 阅读

相关 Elementui NavMenu 导航菜单使用

[官方文档https://element.eleme.cn/\/zh-CN/component/menu][https_element.eleme.cn_zh-CN_compo

浅浅的花香味﹌/ 2022年10月27日 13:57/ 0 赞/ 31 阅读

相关 jquery实现点击导航栏变色

效果如下 ![20190506115333967.gif][] 思路： 1、在css里面设置两个class ![watermark_type_ZmFuZ3po

男娘i/ 2022年04月25日 06:16/ 0 赞/ 445 阅读

相关 elementui中导航menu高亮变色问题

elementui中导航menu高亮变色问题 <el-menu-item-group title="分组2"> <el-menu-item

比眉伴天荒/ 2022年04月10日 01:27/ 0 赞/ 352 阅读

相关代码高亮

知识点代码高亮显示符号 \` 代码高亮显示符号 ~(不推荐) 演示内容 ```java public static void

ゞ浴缸里的玫瑰/ 2021年12月14日 00:27/ 0 赞/ 412 阅读

相关 Element-ui导航组件NavMenu页面刷新后导航高亮问题

1. 文件navMenu.vue，部分代码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

今天药忘吃喽~/ 2021年11月05日 15:38/ 0 赞/ 409 阅读