通过sessionStorage保存element-ui菜单栏的激活状态，在刷新后依旧高亮显示。

最新推荐文章于 2023-11-21 01:45:56 发布
最新推荐文章于 2023-11-21 01:45:56 发布
阅读量1k 收藏 3
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44722972/article/details/106641314
版权
本文介绍了如何在Vue项目中利用sessionStorage持久化element-ui菜单的激活状态，确保页面刷新后仍能高亮显示。通过在el-menu中关联链接地址，数据中保存激活状态，为菜单项添加点击事件，定义saveNavState函数，并在组件创建时读取地址，实现了刷新后状态的保留。此外，此方法还可扩展应用于更多刷新后需保存的数据场景。
摘要由CSDN通过智能技术生成

1.在el-menu中关联高亮的链接地址

<el-menu :default-active="activePath"></el-menu>

2.在data中保存被激活的链接地址

export default {
   
  data()
最低0.47元/天 解锁文章
火灬户
关注
Element-ui中menu使用session storage保存选中状态
Imurs_的博
06-16 585
Element-ui中menu使用session storage保存选中状态，使刷新后页面选中状态不变 <学习记录/> menu中设置 <el-menu router //element路由模式 :unique-opened="opend" //是否只保持一个子菜单的展开 :default-active="activePath" //默认高亮打开显示的菜单 background-color="#545c64" text-color="#fff" active-tex
前端学习（2715）：重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态
歌谣的博客
12-11 313
为了让我们点击二级菜单时，会有一个激活效果，而且是保持状态，我们需要将利用 element-ui 菜单栏相关default-active属性，来让菜单保持激活。 由于每个二级菜单都有一个路由链接，不妨将路由路径path存储在sessionStorage中，具体做法就是给二级菜单绑定一个事件： 每次触发点击事件，我们需要更新当前路由路径，才能让点击的那个按钮高亮。 然后在我们创建这个组件时，就获取当前的激活状态的路径即可。 查看sessionStorage，可以看到我们存储...
elementui 选中子页面时，保持左侧导航中父级的激活状态 :default-active=“activeMenu“
NOyesNONO_的博客
07-05 2095
去配置子路由的页面，给meta加上这个属性即可
Vue 中，实现当前激活按钮的高亮状态 （写导航的激活状态也是同样的道理）
ddx2019的博客
05-08 6593
需求： 实现如图示的按钮高亮效果（默认高亮第一个）： 思路： 1. 使用原生`button`按钮，自己写样式，实现基本样式，再写一个激活状态的样式（背景蓝色，字体白色），控制激活样式的条件`flag`，通过绑定class实现效果；(`flag`可以设置为数字，也可以是文本，最好是和按钮的内容相关)； 2. 使用`Element`的`Button`按钮，因为激活的样式恰好是，`...
前端导航高亮
Irene1991的博客
12-31 577
效果如下： a 标签会先执行绑定的事件，后执行 href 跳转页面（页面刷新）。 导航点击高亮（页面跳转）事件，前端根据一级导航点击时的数字码来确认高亮对象。 页面跳转前执行的绑定事件，缓存数字码，跳转后自动刷新页面，获取缓存中的数字码。 废话不多说，直接上代码。 主要结构： <div class="navbar" :class="'bg_opacity_'+o...
点击Element侧栏导航，顶栏导航的高亮背景效果不消失问题；以及解决刷新导航菜单栏高亮效果消失的问题
qq_39918566的博客
05-12 1271
一、问题描述 1）点击侧栏导航后，顶栏导航的高亮效果还在（问题图片如下，问题已解决）。 2）达到的目的：点击侧栏导航后顶栏导航的高亮背景消失；点击顶栏导航时侧栏导航的高亮效果消失。 二、实现过程 使用了Select（菜单激活回调），清空了左侧菜单栏的高亮样式。以下是部分代码，以顶栏导航的为例子，侧栏导航同理可实现。 1.HTML部分： <!-- 顶栏菜单 activeIndex是data里面的一个参数--> <el-menu router :default-acti
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作
weixin_48884617的博客
03-27 6275
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统--用户列表制作
Vue实战项目day02--电商后台管理系统(Element-ui)
weixin_46379498的博客
06-20 640
Vue实战项目day02--电商后台管理系统Element-ui今日目标后台首页基本布局axios请求拦截器设置激活子菜单样式在后台首页添加子级路由完成用户列表主体区域绘制用户列表基本结构请求用户列表数据将用户列表数据展示实现用户列表分页实现更新用户状态实现搜索功能实现添加用户 今日目标 1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户 效果如图 后台首页基本布局 打开Home.vue组件，进行布局： <el-container class="home-cont
解决在页面刷新前利用sessionStorage存储vuex的数据中的小bug
qq_23260455的博客
10-13 152
问题描述： 我想实现点击这两个按钮（pub和tools) 没有选中的按钮设置display:none,（这样下面的白色三角形就隐藏了） 我为了页面刷新后vuex数据能不被初始化，所以这样做的 在app.vue中 问题描述： 预期效果应该是在当前页面刷新后三角形还是之前被选中的状态，但是实际是： 原因分析： active的值都存进去了，那为什么样式修改没有成功呢。搞了半天发现，本来state中和我添加按钮的方法赋值给state的数据就是字串类型，然而赋值给sessionStorage还转化了
【Vue3+Pinia+Element Plus】el-menu :default-active 当前菜单项保持激活
最新发布
Louis 的博客
11-21 1376
在进行刷新页面或 router.push() 等操作后，el-menu 菜单项的 active 状态会丢失，使用以下代码可解决此问题
如何点击二级菜单切换地址并且转到相应的页面
mini74的博客
04-17 1252
给二级菜单绑定点击事件，并且将地址的参数传送给函数 <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="SaveNavState('/' + subItem.path)"></el-menu-item> 在方法中定义...
vue与elementUI电商后台管理系统笔记05
00年女程序员分享自己的学习笔记
07-12 584
实现首页的路由重定向 左侧菜单改造为路由链接 用户列表开发 实现被点击菜单栏高亮 绘制用户列表的基本UI结构 面包屑导航栏 Card卡片视图区域 获取用户列表数据axios.get 用户列表数据渲染至表格 表格添加索引列...
Vue：如何保持导航栏的高亮状态
weixin_45745641的博客
07-27 2240
我们在利用Vue写后台管理系统时，对于导航栏我们需要保持其处于选择的高亮状态，大概要经过如下三个步骤： 为所需要的点击的二级菜单栏设置点击事件，把对应的index值保存在sessionStorage中 当页面刚被刷新创建时，将sessionStorage中的值取出来赋值给菜单栏进行激活 点击每一个二级菜单栏时，要给activePath重新赋值 下面来看一下具体的实现过程： 1.为二级菜单栏绑定点击事件saveNavState 2.把对应的index值保存在sessionStorage中 saveNav
elementui中el-button点击后不失去焦点(按钮颜色不变)的解决方案
留着鼻涕敲代码
10-31 1万+
初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。 使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态 原因 el-button 的鼠标经过样式以及点击/获取焦点样式其实都是用css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发； 也就是说获得焦点才会导致 el-button 高亮； 解决方案 你可能会想去掉 :focus这个选择器；或者覆盖 我告诉你！不可能！ 我尝试层叠掉那个样式但是color和boder
16.在sessionStorage中保存左侧菜单的激活状态
qq_39055970的博客
07-12 612
在sessionStorage中保存左侧菜单的激活状态1.el-menu的default-active属性2.在sessionStorage中保存左侧菜单的激活状态2.1在sessionStorage中保存点击的菜单路径2.2将sessionStorage的菜单路径赋值给menu的default-active属性 1.el-menu的default-active属性 打开element官网的，查看Menu的default-active属性 在项目中使用 效果如下： 2.在sessionStorage中
vue中使用element-ui组件中的el-button时，@click事件点击无效
热门推荐
坤音女孩的博客
03-25 6万+
1.使用element-ui组件中的el-button时，@click点击无效 2.在@click后面加上 .native即可 【@click.native】
保持左侧菜单的激活状态
qq_32656561的博客
08-15 891
el-menu有一个属性： 可设置default-active="/users"，设置index为/users的选项为激活状态 但是这样就写死了，选择其他选项的时候不会激活，故需要进一步优化。 主要思想，选中选项，将当前选中的选项的index替换掉default-active中的值 修改Home.vue <el-menu background-color="#333744" text-color="#fff" activ
element ui el-menu组件
m0_63466615的博客
02-10 3481
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
element-ui cart 跳转
10-20
但是，一般情况下，使用 element-ui 的跳转可以通过以下步骤实现： 1. 在需要跳转的组件中引入 element-ui 的路由组件：`import {router} from 'element-ui'`。 2. 在需要跳转的方法中使用 `router.push()` 方法...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值