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

最新推荐文章于 2024-05-22 18:11:34 发布
最新推荐文章于 2024-05-22 18:11:34 发布
阅读量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
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
石头的实习之路2——Vue+element ui 切换导航栏菜单不高亮问题
qq_44462050的博客
04-14 2394
使用element ui的横向导航栏组件，点击菜单跳转，路由跳转过来了，但是跳转的菜单没有高亮效果。 跳转产品中心后，可以看到路由变了，但是没有高亮显示 这里采用的跳转方法是在js的methods中写一个方法，通过@click触发方法跳转 methods: { skip_product() { this.$router.push({ path: '/xxxx/product_center' }) } 多方寻找解决办法无果，看到了一位大佬的博客，按照他的方法设置，解
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
11-19
在模板中，Element UI的`el-menu`组件用于渲染菜单，它可以根据`$route.path`自动高亮当前激活的菜单项。`el-submenu`用于创建下拉子菜单，`el-menu-item-group`则用于分组子菜单项。例如： ```html <el-menu :...
element-ui修改el-menu样式记录：设置菜单背景图片、菜单图标、菜单高亮与鼠标悬浮高亮、调整子菜单等样式
个人博客
03-06 2720
menu菜单透明，则背景图片能正常显示。
【Element入门】5、Element UI 导航组件详解
最新发布
weixin_52938153的博客
05-22 772
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
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 8301
Vue中使用el-menu，点击二级菜单时一级图标保持高亮一、案例二、使用步骤1.引入库2.使用el-menu总结 前言 自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。 一、案例 话不多说，先直接上图 二、使用步骤 1.引入库 在main.js中引入ElementUI组件，代码如下（示例）： impor
vue中用vue-cli搭建的项目之el-menu导航栏切换到对应路由下的导航栏高亮
qq_42453751的博客
04-29 1203
欢迎一起交流，可以要一个赞吗，嘿嘿 具体效果图如下 1.第一次进入，默认选中组件超市，注意看网址栏后面的item.name变化 2.切换到我的发布 3.在我的发布页面进行刷新 导航栏组件如下 1.重点： //动态判断当前点击的导航栏是否和要跳转的路由name相同， //相同则切换到目标路由的同时，触发active属性，高亮导航栏 :class="activeMenu == '/' + item.name ? 'active' : ''" //我这里的item.name其实就是要跳转路由后面的一串地址C
el-menu设置侧边栏使选项默认高亮与当前网址一致
LK_315的博客
07-14 1808
使用el-menu实现侧边栏激活选项与当前页面网址一致的功能
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
综上所述，要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
在本文中，我们将探讨如何在Vue.js应用程序中结合Element UI库创建一个具有下拉功能菜单的树形控件，这个功能通常用于增强用户界面的交互性。Vue和Element UI的组合提供了丰富的UI组件，使得开发人员能够快速构建...
vue使用ElementUI时导航栏默认展开功能的实现
08-27
<script src="//unpkg.com/element-ui@1.4.1/lib/index.js"> <el-row class="tac"> <el-col :span="8"> 带 icon <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close=...
在Vue中实现随hash改变响应菜单高亮
10-15
例如，对于Element UI的`el-menu`组件，我们可以将`default-active`设置为我们当前激活的菜单项，即`location.hash.slice(1)`。 此外，如果使用`router-link`来创建导航链接，Vue会自动处理高亮，只需添加`router-...
【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮
黎明总是如期而至
09-01 1623
el-menu 是element-ui的菜单组件，为网站提供导航功能的菜单。
elementUI的Menu组件高亮问题并保存所选高亮
qq_44906497的博客
09-21 990
3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。
Vue中使用el-menu高亮显示问题
weixin_43336525的博客
08-28 2169
在Vue项目中使用了el-menu，需求：进入该页面默认的el-menu-item高亮显示，且点击el-menu-item时路由发生变化，点击的item高亮显示
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
weixin_48210599的博客
09-16 1002
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 1896
css代码 js代码 最初代码，acive写在首页的li中 修改后的代码，将active移到服务范围的li中，相当于在页面写死。 正常效果： 总结：select选中效果与页面无法同步同理。在页面写死selected=selected即可...
el-submenu嵌套使用时 隐藏后submenu闪动再消失
pengpm的博客
11-11 721
【代码】el-submenu嵌套使用时 隐藏后submenu闪动再消失。 多个el-submenu嵌套使用时，:hide-timeout属性不能设置相等的值，不然内部的el-submenu未消失之前外部的就消失了，会出现内部el-submenu闪动的情况
设置高亮当前菜单项
weixin_57334089的博客
10-18 1027
目标 当左侧的某一菜单处于选中状态时，对它高亮显示 分析 当某个菜单处于选中状态时，el-menu自动会有一个特殊的类.is-active，所以我们补充一个css类就可以了。 操作 在 src\styles\sidebar.scss文件中， 在el-menu下添加一个is-active类，样式如下 .el-menu { // 省略其他 .is-active { background-color: $menuText !important; span{ col
el-menu页面刷新高亮不刷新
05-25
如果您使用的是 Element UI 的 el-menu 组件，在页面刷新时高亮状态不会被保留。这是因为页面刷新后，Vue 组件会被重新渲染，组件的状态会被重置。 为了解决这个问题，您可以在组件的 mounted 钩子函数中获取当前页面的路由信息，然后设置 el-menu 的当前选中项。 具体操作步骤如下： 1. 导入 Vue Router 和 Element UI 组件。 ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import { Menu, Submenu, MenuItem } from 'element-ui' ``` 2. 注册 Vue Router 和 Element UI 组件。 ```javascript Vue.use(VueRouter) Vue.use(Menu) Vue.use(Submenu) Vue.use(MenuItem) ``` 3. 在组件的 mounted 钩子函数中获取当前页面的路由信息，并设置 el-menu 的当前选中项。 ```javascript mounted() { // 获取当前路由信息 const currentPath = this.$route.path // 设置 el-menu 的当前选中项 const menu = this.$refs.menu const activeItem = menu.$el.querySelector(`.el-menu-item[data-path="${currentPath}"]`) if (activeItem) { menu.setCurrentIndex(activeItem.getAttribute('data-index')) } } ``` 4. 在 el-menu 中设置 data-path 属性，用于在 mounted 钩子函数中获取当前页面的路由信息。 ```html <el-menu ref="menu"> <el-menu-item index="1" data-path="/home">首页</el-menu-item> <el-menu-item index="2" data-path="/about">关于我们</el-menu-item> <el-menu-item index="3" data-path="/contact">联系我们</el-menu-item> </el-menu> ``` 这样，当页面刷新时，el-menu 组件会自动设置当前选中项，保持高亮状态不变。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值