解决element-ui框架下导航菜单el-menu 刷新后菜单高亮问题

最新推荐文章于 2024-10-04 19:52:16 发布
最新推荐文章于 2024-10-04 19:52:16 发布
阅读量1.1w 收藏 10
点赞数 3
分类专栏： 技术 心得 文章标签： vue element-ui 导航高亮问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jayne_z/article/details/88028336
版权

element-ui + vue.js项目中，页面刷新后侧边导航失去高亮。

element-ui框架el-menu 组件提供一个默认高亮的属性:default-active=“”，页面刷新后可以获取页面的url ,进行处理，获得el-menu-item里面的index,然后赋值给default-active，这样就可以解决页面刷新后element-ui菜单组件高亮问题。具体实现可以看下面代码
在这里插入图片描述
在这里插入图片描述

Z sy
关注
专栏目录
石头的实习之路2——Vue+element ui 切换导航栏菜单不高亮问题
qq_44462050的博客
04-14 2469
使用element ui的横向导航栏组件，点击菜单跳转，路由跳转过来了，但是跳转的菜单没有高亮效果。 跳转产品中心后，可以看到路由变了，但是没有高亮显示 这里采用的跳转方法是在js的methods中写一个方法，通过@click触发方法跳转 methods: { skip_product() { this.$router.push({ path: '/xxxx/product_center' }) } 多方寻找解决办法无果，看到了一位大佬的博客，按照他的方法设置，解
element-ui el-menu 刷新保持高亮的写法
Libra_rookie的博客
05-14 1312
<el-menu :default-active="$route.path" :router="true" :unique-opened="true" background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b"> <!--router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径，字符串，绝对路径--> <!--unique-opened只允许有
【ElementUI】vue3+element-plus引入导航菜单的问题记录
最新发布
qq_35546148的博客
10-04 1130
这两天在搞网站的菜单模块， 前端用的vue3+elementUI，使用时，发现官网很多内容跟最新版本匹配不上，引入的时候会出现很多问题，尤其是elementUI的导航菜单这一块。
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中使用el-menu，点击二级菜单时一级图标保持高亮
Oamnij的博客
09-24 8637
Vue中使用el-menu，点击二级菜单时一级图标保持高亮一、案例二、使用步骤1.引入库2.使用el-menu总结 前言 自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。 一、案例 话不多说，先直接上图 二、使用步骤 1.引入库 在main.js中引入ElementUI组件，代码如下（示例）： impor
vue中用vue-cli搭建的项目之el-menu导航栏切换到对应路由下的导航栏高亮
qq_42453751的博客
04-29 1305
欢迎一起交流，可以要一个赞吗，嘿嘿 具体效果图如下 1.第一次进入，默认选中组件超市，注意看网址栏后面的item.name变化 2.切换到我的发布 3.在我的发布页面进行刷新 导航栏组件如下 1.重点： //动态判断当前点击的导航栏是否和要跳转的路由name相同， //相同则切换到目标路由的同时，触发active属性，高亮导航栏 :class="activeMenu == '/' + item.name ? 'active' : ''" //我这里的item.name其实就是要跳转路由后面的一串地址C
el-menu设置侧边栏使选项默认高亮与当前网址一致
LK_315的博客
07-14 1867
使用el-menu实现侧边栏激活选项与当前页面网址一致的功能
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
综上所述，要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据...
element-ui使用导航栏跳转路由的用法详解
10-18
`<el-menu>` 表示整个导航栏，而 `<el-submenu>` 则用于创建多级菜单结构，每个 `<el-submenu>` 下可以有多个 `<el-menu-item>` 或子 `<el-submenu>`。 在使用导航栏组件进行路由跳转时，有几个重要的属性需要掌握...
Element-Plus导航栏刷新高亮消失（解决）
Daisy_ls的博客
02-28 1570
element项目左侧导航栏里面的高亮，点击时都正常展示，一旦刷新页面，高亮就消失了，但是页面还是之前点击的页面。为了解决这个问题，试了网上说的所有方法，最后发现是少加了一个符号。
解决Element-UI 侧边栏页面刷新后不高亮显示的问题
尘生杜若
05-08 4422
最近在写一个后台管理系统，用的vue+element，搞到侧边栏导航的时候路由跳转没有问题，但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，因为项目时间比较紧，并且没有影响到我后面的开发所以就搁置了一段时间，今天有时间搞了一下，发现想的时候可能有些复杂，其实这个问题还是比较简单的。 例如：下面这段代码 <template> <el-aside width="240px"...
element-ui NavMenu 导航菜单，默认显示多级菜单的第一个页面
jmymy0的博客
06-03 6366
html <el-menu :unique-opened="true" :router="true" background-color="#f6f6f7" text-color="#000" :default-active="routerPath" @open="handleOpen" :default-openeds='defaultOpenedsArray' > <div v-for="(item,taskIndex
【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮
黎明总是如期而至
09-01 2014
el-menu 是element-ui的菜单组件，为网站提供导航功能的菜单。
element NavMenu导航菜单 禁止 高亮
NancyFyn的博客
04-07 913
切换二级菜单，禁止菜单高亮。
elementUI的Menu组件高亮问题并保存所选高亮
qq_44906497的博客
09-21 1099
3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。
Vue中使用el-menu高亮显示问题
weixin_43336525的博客
08-28 2724
在Vue项目中使用了el-menu，需求：进入该页面默认的el-menu-item高亮显示，且点击el-menu-item时路由发生变化，点击的item高亮显示
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
weixin_48210599的博客
09-16 1119
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C:\Users\22725\Desktop\对对对.gif)] 问题描述 如图所示 解决的方法也是自己在网上误打误撞找到了 首先是 给el-menu定义一个class样式 <el-aside width="initial" class="home_aside"> <el-menu
解决点击二级菜单一级菜单背景色闪动问题（页面刷新点击效果无法保留）
leng0920的博客
08-31 1932
css代码 js代码 最初代码，acive写在首页的li中 修改后的代码，将active移到服务范围的li中，相当于在页面写死。 正常效果： 总结：select选中效果与页面无法同步同理。在页面写死selected=selected即可...
el-submenu嵌套使用时 隐藏后submenu闪动再消失
pengpm的博客
11-11 783
【代码】el-submenu嵌套使用时 隐藏后submenu闪动再消失。 多个el-submenu嵌套使用时，:hide-timeout属性不能设置相等的值，不然内部的el-submenu未消失之前外部的就消失了，会出现内部el-submenu闪动的情况
el-sub-menu下级嵌套el-sub-menu高亮问题
08-15
在使用Element UI框架开发时，`el-sub-menu`是其中的一个组件，它用于创建下拉菜单中的子菜单项。有时候，我们可能会遇到下级嵌套`el-sub-menu`时高亮不正确的问题。这个问题通常是因为Element UI默认情况下只能保证当前激活的菜单项高亮，而不包括嵌套层级中的其他`el-sub-menu`。 要解决这个问题，你可以采取以下措施： 1. 确保每一级的`el-sub-menu`都有一个唯一的`index`属性，这样Element UI可以追踪当前激活的路径。 2. 如果你使用的是`el-menu`的`unique-opened`属性，确保嵌套的`el-sub-menu`也遵循这个规则。`unique-opened`属性默认只展开一个子菜单，如果要展开多级子菜单，需要确保正确处理这个属性或通过其他方式实现。 3. 如果你有自定义的逻辑来处理菜单的激活状态，确保更新所有相关的`el-sub-menu`使其高亮。 为了确保下级嵌套的`el-sub-menu`也能正确高亮，你可能需要编写一些额外的JavaScript代码来监听菜单项的点击事件，并相应地更新菜单的激活状态。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值