解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题

最新推荐文章于 2024-05-16 11:23:12 发布
最新推荐文章于 2024-05-16 11:23:12 发布
阅读量1.7k 收藏 4
点赞数
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw_cui/article/details/123998788
版权

直接上代码！！！

1.先启用路由--->:router="true"

2.然后在data函数中定义默认路由

3.然后在mounted钩子函数中添加方法

4.然后完成 

前端劝退大师
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element-plus中el-menu选择二级菜单，一级菜单同时高亮（不需要在style删除scoped也能生效！！！）
PhoenixGuangyu的博客
04-27 2486
【代码】element-plus中el-menu选择二级菜单，一级菜单同时高亮（不需要在style删除scoped也能生效！！！
elementui组件中取消el-menu的选中状态
weixin_43822237的博客
04-19 8164
链接：https://www.jianshu.com/p/c2b6a6152ce9 // 折叠当前展开的菜单栏。 this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0]) // 取消菜单栏的当前选中状态。 this.$refs.elMenu.activeIndex = null 我的开发中有个需求是当前el-menu-item选中打开路由页面时是选中状态，在关闭当前打开的路由页面恢复导航栏el-menu-item未选中的
VUE-element-admin之一二级菜单选中状态保持_&lt；el-menu&gt； 设置默认选中第一个(2)
最新发布
2401_84434237的博客
05-16 328
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
vue Element动态设置el-menu导航当前选中项
weixin_34007906的博客
04-25 4738
vue Element动态设置el-menu导航当前选中项 JavaScript dayaoge 6个月前 (10-20) 1351次浏览 Element UI 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。 官方文档给出了设置默认选中的属性。 Menu Attribute 参数说明类型可选值默认值 mode 模式 string horizont...
vue elementui menu导航菜单根据路由变化选中对应项
hyupeng1006的博客
10-17 3018
1、刷新页面，导航菜单选中项恢复成默认设置 2、点击页面里的链接跳转到其它页面，但是导航菜单不会自动选中当前项
怎么让Element中的＜el-menu＞在刷新后保持当前选中的菜单展示菜单保持不变
qq_64725840的博客
07-12 2375
怎么让Element中的在刷新后保持当前选中的菜单展示菜单保持不变
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
综上所述，要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据...
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
总的来说，Element-UI的NavMenu组件提供了一套完整的导航菜单解决方案，包括菜单项、子菜单、分组、自定义内容和事件处理等功能，可以帮助开发者快速构建出美观且功能完善的导航系统。通过灵活组合和配置，可以满足...
详解elementui之el-image-viewer(图片查看器)
10-16
在Element UI库中，`el-image-viewer`是一个用于实现图片查看器功能的组件，它提供了方便的图片预览和浏览体验。这个组件是独立于`el-image`组件的，这意味着即使你不直接使用`el-image`，也能单独利用`el-image-...
elementUi vue el-radio 监听选中变化的实例代码
10-16
主要介绍了elementUi vue el-radio 监听选中变化，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
使用element-ui的el-menu刷新之后保持选中状态
王二的博客
03-09 3001
3、点击链接是可以完美做到刷新后会保持选中状态，但是当我们手动输入路由的时候，页面会跳转但是css样式不会改变。当输入的路由和当前的路由不一样的时候。第一次访问的时候sessionStorage是空的，所以要加入默认的路径。1、handleSelect函数官网示例给出的是2个参数key和keyPath，分别打印出来后是一样的都是当前的路径。原文链接：https://blog.csdn.net/qq_28262385/article/details/126003201。
Vue + el-menu刷新选中 + 路由监听 + 路由重复点击
假人一个的博客
09-08 4451
0. 整体代码：  【App.vue】 <template> <div id="app"> <HeaderPage :routerData="routerData"/> <br> <router-view v-if="isRouterAlice"/> </div> </template> <script> import HeaderPage from './components/
el-menu菜单中二级菜单
qq_40576178的博客
12-06 1676
<template> <div class="childComponent rectificationHiddenDangers"> <!-- 隐患整改 --> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="transparent" text-color=.
el-menu修改item颜色
bu_xiang_tutou的博客
03-20 3246
今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色，刚好我设置的文字颜色也是白色，就变成什么都看不见了。但是当我使用，下面的代码去修改二级菜单的鼠标浮点事件的时候，我设置的背景颜色就只出现在我鼠标浮动的那个时刻。要设置二级菜单的触发背景颜色的时候，应使用项目的代码。
element el-menu选中后刷新页面 保持当前页选中状态且选中高亮
weixin_71160384的博客
12-01 957
default-active属性代表当前激活菜单的 index，所以想让哪个页面作为项目一进来的首页，就写哪个页面的路径。一定要加上router属性，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，项目的需求是要有选中的背景色且去掉下边框。
elment 菜单栏（Meun）组件，点击外面取消菜单栏的点中样式
weixin_54447214的博客
12-31 1192
一、方法 利用到的方法是 handleItemClick（） 这个方法官方没有给出来，需要你自己去查看的 怎么查看呢 <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="blue" @select="handleSelect" ref="menu" .
Vue3+ElementPlus设置菜单选中
lyna的博客
04-18 3499
做后台系统开发时，跳转路由需要保持父页面选中的状态，这时只需配置一个参数即可。 第一步：配置路由 { path: "list", name: "DataList", meta: { title: "数据列表" }, children: [ { path: '',
elementui的单选选中之后可以取消的方法
m0_59638694的博客
09-01 3114
elementui单选选中之后可以取消
element ui表格取消选中状态
m0_58880115的博客
06-27 2979
在开发中我们经常遇见，element ui表格中选中的数据，如果对选中的数据进行操作之后，需要取消选中状态，不单单需要将multipleSelection当中的值为空。还需要将选中的状态取消。再取消的时候，找到列表的数据然后对列表的数据进行操作，代码如下。将list的数据换成需要取消的数据就可以。
使用element-ui的el-menu导航选中后刷新页面保持当前选中
06-02
在element-ui的el-menu中，可以使用`router-link`来实现路由跳转，这样在切换路由时就可以保持当前选中的菜单项。具体实现步骤如下： 1. 在el-menu中使用`router-link`组件来实现路由跳转，如下所示： ``` <el-menu default-active="1" class="el-menu-vertical-demo" router> <router-link to="/home"> <el-menu-item index="1"><i class="el-icon-menu"></i>首页</el-menu-item> </router-link> <router-link to="/about"> <el-menu-item index="2"><i class="el-icon-menu"></i>关于我们</el-menu-item> </router-link> <router-link to="/contact"> <el-menu-item index="3"><i class="el-icon-menu"></i>联系我们</el-menu-item> </router-link> </el-menu> ``` 2. 使用Vue Router的`router-link-active`指令来自动设置菜单项的选中状态，如下所示： ``` <el-menu default-active="1" class="el-menu-vertical-demo" router> <router-link to="/home" router-link-active="active"> <el-menu-item index="1"><i class="el-icon-menu"></i>首页</el-menu-item> </router-link> <router-link to="/about" router-link-active="active"> <el-menu-item index="2"><i class="el-icon-menu"></i>关于我们</el-menu-item> </router-link> <router-link to="/contact" router-link-active="active"> <el-menu-item index="3"><i class="el-icon-menu"></i>联系我们</el-menu-item> </router-link> </el-menu> ``` 3. 在样式中定义`.active`类来设置选中状态的样式，如下所示： ``` .active { background-color: #409EFF !important; color: #fff !important; } ``` 这样就可以实现在el-menu中保持当前选中的菜单项，并在切换路由时自动更新选中状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值