Vue中使用el-menu高亮显示问题

已于 2024-04-15 11:47:42 修改
阅读量1.6k 收藏 2
点赞数 2
文章标签： vue.js 前端 elementui
于 2023-08-28 16:38:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43336525/article/details/132541500
版权

在Vue项目中使用了el-menu，需求：进入该页面默认的el-menu-item高亮显示，且点击el-menu-item时路由发生变化，点击的item高亮显示。

 首先，我们需要为每个el-menu-item设置一个index，如果我们想实现进入该页面默认的el-menu-item高亮显示，我们需要设置default-active参数，将其设置为默认el-menu-item的index值。由于我们在点击el-menu-item时需要跳转到不同的界面，所以我们设置el-menu的router属性是true,动态绑定路由，然后对每个el-menu-item组件绑定index，index的值是路由的path

wenjing:)
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue el-menu高亮设置及点击菜单项实现路由跳转
爱哭的毛毛虫的博客
11-13 1万+
el-menu相关知识记录一、el-menu菜单项高亮设置二、点击菜单项实现路由跳转 2021/11/13 知识点记录 一、el-menu菜单项高亮设置 el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。 $ route.path对应当前页面路由的路径。 $ route
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
12-13
1本人在学vue项目时遇到一个坑、在写vue项目头部导航时，比如点击第三个，刷新后，高亮状态显示在第一个： 现在是点击第三个页面 刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态； 捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分； 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0，触发点击事件contact时候会重新赋值，跳转路由，一旦刷新页面，这个checkindex的值就是0，所以要把这个checkindex值记录下来，时刻监听到变化；利用到vue的父子和子父传值；监听状态的变化 1、子页面把状态把值传给
el-menu初始默认打开一项，并高亮显示
weixin_45765183的博客
06-30 923
index需要对应$route.path。
el-menu-item点击没有高亮，不变颜色
最新发布
m0_64152677的博客
03-22 162
在el-item-item里面加上 :index 属性就好了。因为没有index无法确定active状态。
解决手动跳转页面，element菜单未高亮
前端菜鸡的博客
02-20 1161
主要是通过修改activeIndex来进行高亮选中 <el-menu ref="menu" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template sl.
Vue的el-scrollbar实现自定义滚动
09-20
本篇文章给大家分享了Vue的el-scrollbar实现自定义滚动实现的过程和实例代码，对此有需要的朋友可以参考下。
【ElementUI】组件库el-menu组件在退出抽屉时无法将选中状态恢复到第一项
Y1lis的博客
07-15 2130
el-menu组件在退出抽屉再进入时无法将默认选中的高亮状态设置成第一项，两行代码解决这个问题。
用vue实现点击选中高亮效果
weixin_42998230的博客
02-07 3996
【代码】用vue实现点击选中高亮效果。
使用element-ui的el-menu刷新之后保持选中状态
王二的博客
03-09 2818
3、点击链接是可以完美做到刷新后会保持选中状态，但是当我们手动输入路由的时候，页面会跳转但是css样式不会改变。当输入的路由和当前的路由不一样的时候。第一次访问的时候sessionStorage是空的，所以要加入默认的路径。1、handleSelect函数官网示例给出的是2个参数key和keyPath，分别打印出来后是一样的都是当前的路径。原文链接：https://blog.csdn.net/qq_28262385/article/details/126003201。
【VUE】点击哪个按钮哪个高亮
SZnAl的博客
08-23 2810
点击某个按钮后那个就高亮显示，其他的置灰。data里设置默认第一个高亮。页面进来后默认第一个高亮显示。
Vue实现选中高亮显示
weixin_57144866的博客
04-11 791
activeIndex==0 //高亮的初始值。
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element NavMenu导航菜单 禁止 高亮
NancyFyn的博客
04-07 795
切换二级菜单，禁止菜单高亮。
elementUI的Menu组件高亮问题并保存所选高亮
qq_44906497的博客
09-21 858
3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值