elementui中导航menu高亮变色问题

比眉伴天荒 2022-04-10 01:27 341阅读 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 条评论，341人围观）

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

相关阅读

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

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

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

相关 vue element-ui menu导航

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

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

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

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

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

相关 vue element menu侧边导航栏

<template>  <!--unique

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

相关 Elementui NavMenu 导航菜单使用

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

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

相关 vue在sublime text高亮问题

1、安装Packages Control sublime text3 打开控制台按 shift+\` 输入以下代码后按Enter（回车） import urll

待我称王封你为后i/ 2022年05月17日 09:39/ 0 赞/ 195 阅读

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

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

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

相关代码高亮

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

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

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

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

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

相关 ARCEngine中的高亮显示

IMap pMap = axMapControl1.Map; IFeatureLayer pFeaturelayer = GetLaye

深碍√TFBOYSˉ_/ 2021年09月17日 08:24/ 0 赞/ 504 阅读