element ui NavMenu 导航菜单页面刷新时菜单选中状态丢失解决方法

最新推荐文章于 2023-08-03 17:46:36 发布
最新推荐文章于 2023-08-03 17:46:36 发布
阅读量2.8k 收藏 5
点赞数
分类专栏： element ui 文章标签： vue web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45261457/article/details/105681190
版权

element ui NavMenu 导航菜单一般做为后台管理系统的切换菜单，在选中菜单跳转页面时会有高亮提示用户选择的哪一个菜单，但是会出现的问题是在跳转页面之后用户如果刷新页面选中的高亮状态就会丢失，这时候只需要在官方给出的例子中做出一点小小的修改就可以实现。
官方提供：

<el-menu-item index="1-1">选项1</el-menu-item>

修改后：

<el-menu-item index="/login">
	<router-link to="login" tag="span">选项1</router-link>
</el-menu-item>
yanggg_only
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element NavMenu导航菜单的使用方法
12-30
组件—导航菜单 顶栏 <el default-active=activeIndex class=el-menu-demo mode=horizontal select=handleSelect> 处理中心 我的工作台 选项1 <el-menu-item index=2-2
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
主要介绍了Element-Ui组件 NavMenu 导航菜单的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-menu 导航栏菜单 当右边的内容部分跳转路由，导航栏高亮的部分不亮了
weixin_44816197的博客
01-04 1538
右边跳转路由，左边的红色高亮就消失了。 先看一下 el-menu里的两个配置项 这两个配置项可以知道这个 index也就是跳转路由的路径 然后在配置路由的js文件里 下面的/learningStatisticsDetails是在上面的/learningStatistics里面跳转的，这样设置之后，跳转到/learningStatisticsDetails里，/learningStatistics这个部分也是激活状态的，导航栏的高亮部分就不会消失了^ ^ ...
element el-menu刷新后选中状态丢失解决方法
m0_59672113的博客
06-11 868
注意：路径是什么index就填什么。
element-ui导航菜单跳转页面后，菜单选中项不对
最新发布
qianduanVIP666的博客
08-03 905
2.el-menu-item 标签 index绑定值=菜单跳转路由（index="/user"）1. el-menu 标签添加属性 :default-active="$route.path"1. 菜单跳转后，页面菜单的选中项与实际不符。2. 当前页面刷新后，菜单选中项与实际不符。
ElementUI导航菜单使用(并解决刷新会调回首页)
眾K的博客
11-25 3583
新桥 <el-menu :default-active="$route.path" //刷新绑定当前页面路径不会跳转 router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 @select="handleSelect" //菜单激活回调 unique-opened //是否只保持一个子菜...
关于Element-ui左侧菜单栏刷新不保留当前状态问题
m0_56420453的博客
05-23 545
这个问题还是比较常见的,在开发项目中也是比较常用的废话不多说上代码（根据一些大牛然后缩减的，勿喷） 第一步首先在 el-menu里有这么一个属性default-active 首先给他绑上一个变量如： 第二步就是 el-menu-item里的index 绑定要跳转的路由页面如： 第三步就是在 mounted里进行最后一步 如 第一步起的名字 active1 所以： 解：最后一步的$route.name 你可以理解为就是你路由里的路由名称 因为分为 path和name 我们在这只用nam...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...
elementUI点击NavMenu的一个菜单，跳转到另一个页面，菜单，头部消失
Cao_Mary的博客
08-25 3716
使用elementUI的NavMenu，点击菜单时，有时需要跳转到另一个页面后，菜单，头部消失，就像一个新开的页面。 解决方法： 在新页面的组件中，使用css实现，如下： <template> <div class="direct"> </div> </template> <script> export default { name: 'Direct', } </script> <style scoped lang
关于vue使用Element Plus框架的时候，使用Menu菜单的时候，遇到了一些问题，解决了
weixin_46212682的博客
12-14 5330
关于vue使用Element Plus框架的时候，使用Menu菜单的时候，遇到了一些问题，解决了
解决vuex在页面刷新后数据丢失的问题
weixin_34357267的博客
05-22 239
一、原因 　　js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。 　　刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。具体选择哪一个就根据你实际需求来选择。 二、解决...
解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题
热门推荐
sumimg的博客
09-10 1万+
解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题 情况一：单个菜单页面刷新导航失去高亮；（如下图这种菜单类型） 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值，解决这个只用取出当前页的路由然后赋值给activeIndex即可，代码如下： <el-menu :default-active="activeIndex" mode="horizonta
elementui - 刷新后导航栏active状态丢失问题
lishuangzhi的博客
11-29 1351
用vuex存一个状态?no no no 下面的实现方式才优雅 template <el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal" active-text-color="#409EFF"> <el-menu-item v-for="route in routes" :key="route.path" :index="r
关于ElementUi中树形控件默认显示二级节点
lee_glj的博客
12-09 3458
需要用到这个属性。设置了这个属性之后，在data里定义一个数据用来存放默认展开的节点的id。我这里定义了TreeArr[] 然后在加载树图数据的方法中遍历找到第一个节点的id，把这个id放到刚才定义的TreeArr中即可。 补充：如果想展开第二级节点就把第一级的id放进去，如果想展开第三级节点，就把第二级节点的id放进去。效果如图： ...
vue中NavMenu导航菜单刷新高亮，上一级常亮实现
coinisi_li的博客
01-09 1287
而一级菜单栏由activeMenu来自定义高亮，使得activeMenu配置和一级菜单的index属性中的配置一直一致，这样接口文档内的纵向菜单在切换的时候就不会影响到一级主菜单的高亮了。通过路由router设置路由元信息（meta）记录地址，在MenuNav中读取meta中设置的信息，匹配el-menu-item中index的值，来解决刷新或地址改变造成的一些导航栏高亮问题。在当前页面中还嵌入一个纵向菜单，这个纵向菜单高亮代表这个页面显示不同的tab（刷新页面后依旧保持高亮）在菜单中，存在多级带单。
element-ui 中的 NavMenu 导航菜单 el-menu-item标签 自定义默认被选中
weixin_44647098的博客
09-09 9070
是选中的 ‘1’ 默认选中的 num 至于这个num 就是 你 循环出来的 的数值 <template> <div id="index"> <el-menu :default-active="'1'" router mode="horizontal" background-color="white" text-color="#222" ...
element中navmenu组件刷新时，光标锁定在当前路由所处菜单
hj_1520的博客
12-16 226
实现刷新时光标显示了
解决点击按钮实现路由跳转后Element导航菜单没有同步选中状态的问题
weixin_55995662的博客
03-19 1477
点击按钮是时候会出现高亮选中状态，但是通过刷新，点击按钮进行路由跳转，或者手动输入url时，选中状态不会同步变化，其实解决问题的方法很简单。 将Element的default-active的参数改成根据路由的变化进行同步跳转的交互，就可以实现导航菜单同步更新 ...
侧边框导航刷新之后被选中状态消失
weixin_51263829的博客
08-26 157
页面刷新之后被选中状态消失改法
element ui如何修改NavMenu 导航菜单里面选项的样式
06-06
要修改 Element UI 的 NavMenu 导航菜单里面选项的样式，可以使用以下两种方法： 1. 使用 Element UI 提供的样式类 在 NavMenu 组件中，每个选项都是一个 el-menu-item 组件，因此你可以使用 Element UI 提供的样式类来修改选项的样式。例如，要修改选项的背景颜色和字体颜色，可以在 CSS 文件中添加以下代码： ``` /* 修改选项的背景颜色 */ .el-menu-item.is-active, .el-menu-item:hover { background-color: #f0f0f0; } /* 修改选项的字体颜色 */ .el-menu-item.is-active a, .el-menu-item:hover a { color: #333; } ``` 2. 自定义 NavMenu 组件的模板 如果你需要更复杂的样式修改，可以自定义 NavMenu 组件的模板，在模板中添加自己的 CSS 样式。具体操作步骤如下： 1）在 Vue 组件中，使用 template 属性自定义 NavMenu 组件的模板，并在模板中添加自己的 CSS 样式。例如： ``` <template> <el-menu class="my-nav-menu"> <template v-for="item in menuData"> <el-menu-item :index="item.index" :key="item.index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </template> </el-menu> </template> <style scoped> .my-nav-menu { /* 自定义 NavMenu 的样式 */ } .my-nav-menu .el-menu-item { /* 自定义 NavMenu 选项的样式 */ } </style> ``` 2）在 Vue 组件的 script 标签中，使用 components 属性注册自定义的 NavMenu 组件，并在其他组件中使用自定义的 NavMenu 组件。 ``` <script> import { defineComponent } from 'vue'; import MyNavMenu from './MyNavMenu.vue'; export default defineComponent({ name: 'MyApp', components: { 'my-nav-menu': MyNavMenu, }, }); </script> <template> <div> <my-nav-menu :menuData="menuData" /> </div> </template> ``` 通过以上两种方法，你可以灵活地修改 NavMenu 导航菜单里面选项的样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值