elementui导航菜单高亮问题

最新推荐文章于 2023-09-21 09:47:51 发布
最新推荐文章于 2023-09-21 09:47:51 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： vue-cli后台系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44712405/article/details/101033014
版权

1.在标签上设置 :default-active="defaultUrl"

2.绑定到data中

3.获取路由赋值给defaultUrl，可以直接赋值

this.defaultUrl = this.$route.path

也可以把路由进行拆分，取中间某个词赋值

4.让el-menu-item标签中的 :index与defaultUrl值相同，任何情况下，高亮都是显示正常的

岸芷汀兰§小慧
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目 标签页点击对应多级菜单高亮
weixin_59597498的博客
12-14 832
el-menu属性 :default-active="activeIndex" ，计算属性activeIndex 如果报错，可能是计算属性没有加get（），set()， 这样报错解决 同时el-menu-item当中还是设置index属性，有的文章会说是设置为route，就我个人实验而言，多级菜单不适用 如果像上述这样写，router路由index.js当中path和name必须保持一致，不然菜单不会有高亮效果 最后效果： ...
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
10-16
今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui中导航菜单选择高亮
mmmawo的博客
10-17 2520
Element-ui中航菜单选择高亮有两种方法 1.active-text-color与default-active 在Element-ui的文档中写明了可以使用active-text-color来选择当前激活菜单的文字颜色,default-active是选择当前激活菜单的index. 2.动态class is-active 在点击导航时会动态添加类名 is-active,可以给is-active来添加css属性,以实现高亮功能. ...
elementui中NavMenu 导航菜单高亮问题——解决多种情况
热门推荐
winne雪
07-08 2万+
前言： 如果使用elementui这个框架来开发系统，那么我们几乎都会使用到NavMenu 组件。我们可能需要菜单根据我们点击的那一项高亮显示，刷新页面了之后还是会相应的高亮显示。 我在项目中遇到的情况有三种：（vue-cli + elementui） 1、横向菜单 如果仅有一个菜单，那么点击当前菜单高亮；如果菜单下有二级下拉，那么点击下拉二级菜单高亮，并且一级菜单也高亮（刷新页面后依旧保持高亮）...
element UI 导航菜单刷新保持高亮
LQS000的博客
04-09 275
/router当导航激活时允许以index作为路由进行页面的跳转,//使用default-active来实现当前菜单激活的选项。route.path）当前路由对象的路径，针对进入详情页保持高亮。
elementUI的Menu组件高亮问题并保存所选高亮
最新发布
qq_44906497的博客
09-21 989
3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。
jquery高亮滑动导航菜单.rar
07-04
"jQuery高亮滑动导航菜单"是一种使用JavaScript库jQuery实现的交互式菜单效果，旨在提升用户体验，使用户更容易追踪他们在网站中的位置。在这个项目中，我们将深入探讨如何使用jQuery创建这种动态、具有视觉吸引力的...
Layui 导航默认展开和菜单栏选中高亮设置的方法
10-16
- 在HTML结构中，`layui-nav-itemed` 类用于表示导航菜单的展开状态。例如，在上述代码中，当`title_sys`等于'内容管理'时，`index1` 类名的`li`元素将被设置为展开状态。你可以根据需要在后端逻辑或前端数据动态...
基于jquery实现导航菜单高亮显示（两种方法）
11-23
点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下： 示例代码一： 具体示例代码如下： <!...
element-ui菜单组件嵌套二层路由导致当前菜单高亮的问题
望南
06-15 4185
二级路由导致菜单高亮失效 首先 如果页面没有添加二级路由或者多级路由菜单得话，可以直接使用官网给的方法 :default-active="$route.path" 就没有问题了 但是当存在多层路由嵌套得时候，建议将路由写在计算属性里面 :default-active="defaultActive" 其中计算属性里面写入需要或企业得路由， computed: { //获取当前...
element UI中使用导航栏配置router后无法高亮
l1002670137的博客
09-19 566
解决组件库侧栏配置router后点击没有高亮显示的问题
使用element-ui 菜单栏(el-menu)点击两次才高亮的bug
浮游的博客
03-14 1153
解决方法：使用路由的name属性设置给index和default-active。原因：default-active和index属性不一致导致的。
element侧栏导航菜单NavMenu,删除其中一个菜单后，高亮显示错误？
铃儿响叮当
06-09 580
这是我曾在项目中切实遇到的问题，觉得很有必要给大家分享一波，避免大家同样遇坑！ 1.需求前景：首先给大家介绍下，这个项目需求大概是什么情况？需求是侧边导航栏，要求可以对其进行增删改查，如下图所示： 2.遇到的坑：删除其中一个模块后，再次点击其中的某一项菜单，发现被删除之后的菜单高亮显示错位了，但是项目也不报错，这着实让人胃疼。。 3.话不多说，我们直接说为啥以及怎么解决这个问题？直接上代码： 没错就是这个唯一性标识key引起的，因为这里所用的是循环的索引值index,而当删除其中一个后，后面对应
Vue中使用el-menu，点击二级菜单时一级图标保持高亮
Oamnij的博客
09-24 8295
Vue中使用el-menu，点击二级菜单时一级图标保持高亮一、案例二、使用步骤1.引入库2.使用el-menu总结 前言 自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。 一、案例 话不多说，先直接上图 二、使用步骤 1.引入库 在main.js中引入ElementUI组件，代码如下（示例）： impor
el-menu在一级导航跳转其他页面后，一级导航保持高亮
weixin_43773218的博客
12-27 1523
代码实现：主要思路是，在写路由的时候，给跳转的路由在meta中加上activeMenu，这activeMenu即一级导航需要保持高亮的路由地址，然后在el-menu组件中添加default-active,即如果跳转的路由有activeMenu的话，就让这activeMenu保持高亮，如果没有则让跳转的页面高亮。先上效果图，在只有一级导航的情况下，跳转到其他页面的时候，一级导航保持高亮。
vue element-ui中选择子菜单时父菜单高亮
m0_51371710的博客
04-22 1023
发现页面载入时和刷新页面时能高亮显示了，但选择子菜单时父菜单无高亮。不知道有没有小伙伴分享自己的解决方案，一起进步。但发现页面载入时和刷新页面时高亮显示消失。这时候想到用计算属性来解决办法。最近想要这样一种效果。
【 Element UI 】二级菜单高亮显示
zwj
07-29 1249
保持二级菜单点击之后高亮 <el-menu :collapse="isCollapse" :collapse-transition="false" background-color="#fff" text-color="#000" active-text-color="#ffd04b" :router="true" :default-active="aciveNavPath" > </el-menu> <script>
vue 中使用element-ui的menu选中项高亮的问题
weixin_44388697的博客
05-08 1973
vue 中使用element-ui的menu选中项高亮的问题 在使用element中的menu组件时，根据官方文档，可以设置给el-menu设置router属性为：true，给el-menu-item设置index的值为路径，就可以实现点击导航跳转到指定路由。 这样做虽然能实现跳转，但是，若刷新浏览器，则导航会跳转到默认的选中项，而不是我们离开时的导航。 百度时大部分回答是将default-active属性设置为：$route.path，这样页面重新渲染时就会选中当前的路由了。可是，解决了刷新的问题，还有
element-plus中el-menu选择二级菜单，一级菜单同时高亮（不需要在style删除scoped也能生效！！！）
PhoenixGuangyu的博客
04-27 2513
【代码】element-plus中el-menu选择二级菜单，一级菜单同时高亮（不需要在style删除scoped也能生效！！！
vue+ElementUI中菜单高亮问题
06-07
在Vue+ElementUI中，可以通过给菜单添加 `index` 属性来控制菜单的高亮显示。具体做法如下： 1. 在菜单组件中添加 `index` 属性，例如： ```html $route.path" class="el-menu-vertical-demo" router> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值