element中navmenu组件刷新时，光标锁定在当前路由所处菜单

已于 2022-12-16 17:02:54 修改
阅读量284 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-12-16 16:58:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hj_1520/article/details/128345084
版权

1、在路由中加入路由元

 2、在菜单放置页面

3、路由元中设置的index值要与el-munu-item标签一样

 

4、绑定到el-menu标签中的default-active属性

 

这样就可以实现刷新时光标显示了 

J呀
关注
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element el-menu选中后刷新页面 保持当前页选中状态且选中高亮
weixin_71160384的博客
12-01 1230
default-active属性代表当前激活菜单的 index，所以想让哪个页面作为项目一进来的首页，就写哪个页面的路径。一定要加上router属性，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，项目的需求是要有选中的背景色且去掉下边框。
vue中NavMenu导航菜单刷新高亮，上一级常亮实现
coinisi_li的博客
01-09 1460
而一级菜单栏由activeMenu来自定义高亮，使得activeMenu配置和一级菜单的index属性中的配置一直一致，这样接口文档内的纵向菜单在切换的时候就不会影响到一级主菜单的高亮了。通过路由router设置路由元信息（meta）记录地址，在MenuNav中读取meta中设置的信息，匹配el-menu-item中index的值，来解决刷新或地址改变造成的一些导航栏高亮问题。在当前页面中还嵌入一个纵向菜单，这个纵向菜单高亮代表这个页面显示不同的tab（刷新页面后依旧保持高亮）在菜单中，存在多级带单。
element ui NavMenu 导航菜单页面刷新时菜单选中状态丢失解决方法
weixin_45261457的博客
04-22 2960
element ui NavMenu 导航菜单一般做为后台管理系统的切换菜单，在选中菜单跳转页面时会有高亮提示用户选择的哪一个菜单，但是会出现的问题是在跳转页面之后用户如果刷新页面选中的高亮状态就会丢失，这时候只需要在官方给出的例子中做出一点小小的修改就可以实现。 官方提供： <el-menu-item index="1-1">选项1</el-menu-item> 修改后...
elementUI的NavMenu的选中状态刷新会丢失解决方法
weixin_42178670的博客
04-19 980
方式一：当你的路由模式为hash模式时： mounted() { // activeIndex最终绑定给<el-menu :default-active="activeIndex"> this.activeIndex = window.location.href.split('#')[1]; } 方式二： 当你的路由模式为history模式时： mounted() { // activeIndex最终绑定给<el-menu :default-active="activeIn
组件-Element—NavMenu（ 导航菜单）
GU_AO_SHI_TAI_DU的博客
07-04 8160
组件-Element—NavMenu（ 导航菜单） 组件—导航菜单 顶栏 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-ite...
ElmentUI的NavMenu组件动态封装
01-08
在介绍Element UI的NavMenu组件动态封装的过程中，我们将首先对Element UI这个流行的前端UI框架做简要回顾，接着深入探讨NavMenu组件的结构和功能，然后针对如何利用递归技术动态渲染组件的subMenu和menu_item进行...
Element UI：NavMenu 导航菜单实战指南
本文主要探讨了Element UI框架中的NavMenu导航菜单组件的使用方法，通过实例代码详细解析了如何创建和配置水平模式的导航菜单，包括菜单项、子菜单及禁用状态的设置，旨在帮助开发者提升其在网页应用开发中的实践...
VUE-Element组件（二）NavMenu导航菜单
w_t_y_y的博客
04-09 1万+
navmenu组件
Element plus NavMenu 导航菜单使用
qq_32209081的博客
06-10 4563
<el-menu :default-active="active" class="sidebar-menu" background-color="#f9f9f9" text-color="#565656" unique-opened router active-text-color="#0079fe" :collapse="isCollapse" @select="handleSelect"> <templat
element-ui 刷新后对应菜单栏的高亮
weixin_40659167的博客
01-29 1707
当菜单栏作为路由转换的router-link的时候， 在el-menu标签中添加 :default-active="this.$route.path" 而且还要记得加个router
vue3 使用element-ui的el-menu刷新之后保持选中状态
jieweiwujie的博客
02-26 1005
3、点击链接是可以完美做到刷新后会保持选中状态，但是当我们手动输入路由的时候，页面会跳转但是css样式不会改变。当输入的路由和当前的路由不一样的时候。把当前的路由赋值给activeIndex。mounted函数中把这个当前路径赋值给 activeIndex 即赋值给了 default-active 参数。第一次访问的时候sessionStorage是空的，所以要加入默认的路径。官网示例给出的是2个参数key和keyPath，分别打印出来后是一样的都是当前的路径。
element中navMenu结合路由使用
qq_45021462的博客
07-13 3774
路由 使用NavMenu做为导航菜单，实现的不好会出现点击菜单跳转到新页面的情况。如果想要实现本页跳转，菜单导航页的路由要作为其它菜单页的父路由。 现有菜单导航页：home.vue，图表页：echart.vue。如菜单导航页的路由为/home，要想实现本页面路由跳转，则图表页的路由为/echart是不可以的，路由应为/index/echart，必须是菜单导航页的字路由。 import Vue from 'vue' import VueRouter from 'vue-router' import Home
elementUI的导航栏怎么根据路由默认选中相关项
weixin_34088583的博客
10-17 1596
1. <el-menu :default-active="this.$route.path.substr(1)" class="left-nav"> 2. el-submenu或者el-menu-item的index设置成路由对应的字符串 比如：路由为http://localhost:8080/#/project/list时，将需要被选中的el-subm...
怎么让Element中的＜el-menu＞在刷新后保持当前选中的菜单展示菜单保持不变
qq_64725840的博客
07-12 2605
怎么让Element中的在刷新后保持当前选中的菜单展示菜单保持不变
vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由
蓝胖子的博客
03-07 7191
两种方式 <el-menu :default-active="$route.path"></el-menu> 2.（1）、设置属性 :default-active=“activeIndex” （2）、watch方法检测路由变化 （3）、created生命周期设置路由 <template> <div style="position: relative"> <el-menu router mode="horiz
解决element导航栏刷新，选中效果消失
最新发布
weixin_51600020的博客
03-05 790
1.添加:default-active="activeMenu"配置项。2.添加计算属性activeMenu值，每次点击后会自动计算当前路由位置。
解决ElementUI NavMenu导航菜单 组件设置active-text-color属性会选中多个bug
m0_52364694的博客
09-20 2344
解决方法：为el-menu-item 组件的index属性设置唯一的值
elementUI 中MENU菜单踩坑
热门推荐
weixin_33726313的博客
11-16 1万+
问题描述： 在写博客的时候用到了elementUI中menu菜单， 需求：点击当前页面的按钮跳转到首页，给menu中绑定的default-active赋值 问题：页面已经跳转过去，可menu选中项根本没有发生变化 解决办法： 直接将当前页面的路由绑定到default-active上，同时将index改为当前路由，这样在通过非点击导航菜单跳转页面时就不需要再来手动改变导航菜单的选中项了，它会自己选中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值