Element-ui中的导航菜单el-menu自动激活当前路由对应的菜单项

最新推荐文章于 2026-03-01 03:55:41 发布
原创 最新推荐文章于 2026-03-01 03:55:41 发布 · 1.2w 阅读 · 16 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue #element-ui #el-menu #菜单 #vue-router
解决Element-ui中el-menu在页面刷新后，当前激活菜单项消失的问题。通过使用$router.currentRoute.name或$router.currentRoute.path作为default-active的值，确保菜单项状态在刷新后仍能保持。

Element-ui中的导航菜单el-menu自动激活当前路由对应的菜单项

el-men有一个坑，就是当前激活的菜单项，刷新页面后，激活项就会消失。

在这里插入图片描述
研究半天终于找到解决办法：
原来default-active的值不一定是数字，也可以是路由path、name，只要是字符串能对应上就能正确激活，所以这里做以下改动：
在这里插入图片描述
在这里插入图片描述
目前网上搜索到的很多都是router.path，目前新版vue−router应该是已经改成了router.path，目前新版vue-router应该是已经改成了router.path，目前新版vue−router应该是已经改成了router.currentRoute.name，$router.currentRoute.path

Element Plus中Menu组件(el-menu/el-menu-item/el-sub-menu)的现代用法与组合模式解析
最新发布
weixin_27890975的博客
05-10 201
本文深入解析Element Plus中Menu组件（el-menu/el-menu-item/el-sub-menu）的现代用法与组合模式。从基础菜单结构到多级菜单实现，再到动态菜单与样式定制，全面展示如何利用Vue 3特性优化菜单开发。特别适合需要构建复杂导航系统的开发者，提升Element Plus在现代Web项目中的应用效率。
vue+elementui实现侧边导航，select菜单激活回调函数实现路由跳转
weixin_46371752的博客
02-21 5623
1、系统页面布局采用的是elementui布局 <el-container> <el-aside width="200px"> <el-menu @select="menuClick"> <!-- select是菜单激活回调--> <el-submenu index="1">
el-menu 切换菜单激活状态default-active
qq_51553392的博客
03-23 3024
el-menu 切换菜单激活状态
页面跳转，更改menu激活状态（vuex）
qq_22841387的博客
12-13 2891
首先，我们需要在 Vuex 中定义一个用于保存菜单激活路径的状态activePath，并提供同步和异步的方法来更新它。
el-menu页面内控制激活的菜单$router.path :default-active
qlin_11的博客
08-09 2万+
需求是在页面内点击跳转，但是菜单项依然是激活状态，我这里实现的方法是做了子路由，然后使用push来控制路由跳转，跳转时使用$router.path来实现更改默认路由，注意子路由需要使用split来分割出第一个/后的一级路由，使用这个取出来的来赋给：default-active,这里因为是通过请求从后台获取的菜单路由，赋给index来实现动态加载不同的菜单项，所以会有el-menu的index可能...
NavMenu导航菜单el-submenu点击事件及激活状态变化
adminguojieBin的博客
09-23 1万+
多级菜单时一级菜单添加点击事件以及导航栏当前激活状态变化
element-ui菜单el-menu的使用
m0_63040701的博客
05-28 2万+
el-menu详解。
Element el-menu(NavMenu)的正确用法
热门推荐
weixin_42565137的博客
06-13 10万+
最近在使用Element开发时 一开始按照官网示例 产品前期没什么问题 到了后期 遇到这样一个情况：并不是只有点击导航栏才跳转页面 需求： 如果根据官网的示例，每个el-menu-item的index都为’1-1’ '1-2’之类的。如果直接跳转路由，你会发现导航栏当前激活菜单的 index没有改变。点击跳转。但菜单栏依旧停留在分组这个栏目 只有两种方法可以解决这个问题： 通过子组件的thi...
Element UI菜单高亮进阶：如何优雅处理三级以上路由的el-menu激活状态？
blockchain9miner的博客
03-01 765
本文深入探讨了在Vue.js项目中使用Element UI的el-menu组件时，如何处理三级以上复杂路由结构下的菜单高亮难题。通过分析$route.matched属性，并提出了基于路由元信息meta.menuIndex的声明式解决方案，实现了对任意深度路由的精准、自适应高亮控制，有效提升了后台管理系统的用户体验与代码可维护性。
如何根据路由高亮 Element UI 里的 el-menu-item ？
猿海无涯，码农无边
02-18 2225
el-menu 里的 default-active 在刷新页面的时候重置高亮的菜单，导致的结果就是当前页面和高亮的菜单不匹配。可以尝试用下面的代码来解决： ➥ Vue <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router> <el-menu-item index="/home"&...
vue el-menu菜单递归循环创建
qq_41007321的博客
06-16 1万+
说明： 根据返回的数据动态循环渲染菜单，是否具有子级目录递归创建所有目录并具有复用性，动态绑定相关属性； 解决步骤： 1、使用element组件（具体步骤不在赘述） 2、先创建公共组件 （1）在第一级菜单循环过程中，如判断出当前菜单存在着子级菜单，渲染出当前菜单，并将当前菜单的子级属性（例如：child：[数组]），利用子组件传参的方式，传给我们现在正在封装的组件（俗称：无限套娃）。 注意： 组件必须要添加name属性，名称与注册时命名一致； 完整代码： （1）封装的子组件 <template>
el-menu实现路由跳转及当前页的导航
weixin_55560445的博客
01-06 3541
1、el-menu-item 路由跳转 要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下index即可实现点击el-menu-item实现路由跳转。 <el-menu :router="true> <el-menu-item index="/home">...
element中el-menu的动态变化问题
印第安米饭
07-01 5551
<el-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 slot="title">我的工作台</template> <el-
vue+element的el-menu组件实现路由跳转及当前项的设置
diaobiteng1128的博客
12-13 1476
<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark"> <el-submenu index="1"> <templa...
Vue3+Ts+Vite项目(第九篇)——基于el-menu封装左侧菜单栏组件，element-plus el-menu二次封装
做笔记/记录遇到的前端bug
08-03 1万+
Vue3+Ts+Vite项目基于el-menu封装左侧菜单栏组件，实现根据路由列表动态渲染导航菜单，递归实现多级菜单渲染
element ui el-menu组件
m0_63466615的博客
02-10 3883
1.组件需要先写在<el-menu></el-menu>里面 2.一点此单就能显示东西或进入路由的就用 <el-menu-item></el-menu-item>实现 3.点了展开下一级菜单的要写在 <el-submenu> <template slot=‘title’>标题文本</template> <el-menu-item></el-menu-item> </el-subme
7.3 el-menu
chxii的专栏
08-31 1266
el-menu>。它是构建网站或应用侧边栏导航、顶部导航栏等结构化导航系统的强大工具一个el-menu<el-menu><el-menu>modehorizontalverticalindexindextruehoverclickcollapsetruetrueroutertrueindextext-colorellipsis...trueindent20opencloseselectrouterindexrouterrouterselectrouteindexdisabledtitleindex。
el-menu页面跳转保留上一级路由样式
weixin_44066534的博客
09-17 1537
功能实现：el-menu中使用 vue-router进行页面跳转时，可以直接通过设置:default-active="$route.path"（注意default-active是el-menu自带的属性绑定，要添加前面的冒号）以及设置el-menu-item中的index = "跳转路径"即可点击el-menu-item实现页面跳转 <el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal"
element-ui中NavMenu导航菜单路由跳转时无法切换菜单状态
太极梦龙的博客
11-19 5946
问题说明 使用element-ui的NavMenu导航菜单时发现一个问题,当在二级页面通过事件使用$router.push('/article')方法切回到article页面时,导航菜单无法正确显示当前页面的菜单项,还依旧停留在上个页面 问题解决: 从官网发现,该属性可以解决这个问题 在el-menu标签中添加该属性,并绑定该属性值为跳转页面的哈希值,从而实现当前页面的菜单激活 ok,问题...
element ui的使用导航栏跳转路由的用法详解
qq_47648083的博客
03-08 5477
使用elemen-ui的导航栏做路由跳转切换页面 先复制官方的例子 <el-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 slot="ti
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

带头大哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值