Element-ui中menu使用session storage保存选中状态

最新推荐文章于 2023-05-23 10:58:46 发布
最新推荐文章于 2023-05-23 10:58:46 发布
阅读量573 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Imurs_/article/details/106791260
版权
本文介绍如何在Element-ui的menu组件中利用sessionStorage保存选中状态，以便在页面刷新后能恢复之前的选中状态。通过监听menu的选中事件，将选中项存入sessionStorage，并在页面加载时读取这些值，设置默认激活的菜单项。
摘要由CSDN通过智能技术生成

Element-ui中menu使用session storage保存选中状态，使刷新后页面选中状态不变

<学习记录/>
menu中设置

<el-menu
  router	//element路由模式
  :unique-opened="opend"	//是否只保持一个子菜单的展开
  :default-active="activePath"	//默认高亮打开显示的菜单
  background-color="#54
最低0.47元/天 解锁文章
Imurs_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习（2715）：重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态
歌谣的博客
12-11 294
为了让我们点击二级菜单时，会有一个激活效果，而且是保持状态，我们需要将利用 element-ui 菜单栏相关default-active属性，来让菜单保持激活。 由于每个二级菜单都有一个路由链接，不妨将路由路径path存储在sessionStorage中，具体做法就是给二级菜单绑定一个事件： 每次触发点击事件，我们需要更新当前路由路径，才能让点击的那个按钮高亮。 然后在我们创建这个组件时，就获取当前的激活状态的路径即可。 查看sessionStorage，可以看到我们存储...
通过sessionStorage保存element-ui菜单栏的激活状态，在刷新后依旧高亮显示。
qq_44722972的博客
06-09 1003
1.在el-menu中关联高亮的链接地址 <el-menu :default-active="activePath"></el-menu> 2.在data中保存被激活的链接地址 export default { data() { return { // 被激活的链接地址 activePath: "" }; } } 3.在具体的el-menu-item添加点击事件 //添加saveNavState事件，并传入路由地址 el-menu-
16.在sessionStorage中保存左侧菜单的激活状态
qq_39055970的博客
07-12 527
在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中
Element-ui中menu使用sessionStorage保存选中状态
qq_45310438的博客
02-13 372
使用sessionStorage使刷新后页面选中状态不变 menu中设置 绑定事件，存入sessionStorage 取出sessionStorage中的值，赋给:default-active
VUE+Element实现历史搜索
weixin_48604432的博客
09-04 1164
实现历史搜索，主要用到了 localStorage 储存 localStorage 可以长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 引入element的 autocomplete输入框 是一个可带输入建议的输入框组件 <template> <div> <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placehold
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于各种类型的应用场景。 ### 基础用法 1. **水平导航菜单**： 在水平模式下，`el-menu`组件可以通过`:default-active`...
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，...这个“element-ui.rar”压缩包就是你开始使用 Element UI 的起点，解压后可以查看其内部结构，进一步学习和了解每个组件的用法。
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
以上就是在JSP中使用Vue.js+Element-UI+Vue.js第三方组件的基本步骤。这样的组合使得开发者可以利用Vue.js的强大功能和Element-UI的精美组件库，同时保持JSP对后端数据的控制力，从而创建出高效、美观的Web应用。...
elementui 怎么取出session_彻底搞懂Token、Session和Cookie
weixin_28718641的博客
02-03 895
Cookie、Session和Token对于从事Web开发的程序员来说并不陌生，它们都是会话状态的一种解决方案。Http协议无状态的特点导致程序无法区分多次请求是否是同一个用户发起，所以，我们就用token、session和cookie的技术来解决无状态的问题。1、TokenToken顾名思义就是令牌、凭证、钥匙，只有这把钥匙，你才能打开门。Token一般都是服务端生成，比如一个web系统，用户登...
[翻译]Mootools 1.2新特性（一）：元素存储(Element Storage)
weixin_33724059的博客
07-02 102
尝试翻译第一作，自己都读不懂，慢慢找时间改一下。 原文地址 : http://blog.mootools.net/2008/1/22/Element_Storage MooTools另一个最新的内建特性是Element存储(Storage)。这篇文章描述这个强大的新特性使用方法，和为何开发这个特性，以及它如何保持你的应用组织化、有效率。 Element存储都包含些什么？ 当开发...
sessionStorage 购物车
virgilSparta的博客
03-01 1658
会话存储(Session storage)技术是由W3C的Web Storage提供的一项新特性。这个新特性可以被Explorer 8+、Firefox、Chrome、Safari 和 Opera的桌面浏览器支持，完整的浏览器支持列表可以查看Can I Use。在这篇文章中，我们将使用session storage会话存储技术的sessionStorage对象和jQuery来实现一个完整的客户端电...
Session中的Menus在别的用户登录后被篡改
oyl822的专栏
11-25 216
[size=small]　　今天，已经上线的项目，客户忽然那边报出一个bug来。 　　 　　bug描述如下： 　　在PC1下以user1登录系统，接着以user2在PC2登录系统，之后user1的部分菜单变成了user2的菜单。 　　当时觉得这个bug很不可思议，因为系统是一个项目组的子项目，是一个web程序，菜单都是在用户登录系统的时候写进session里面的，在不同的PC上登录怎么...
vue3+el-menu实现路由刷新左侧菜单栏保持选中状态
最新发布
m0_59006402的博客
05-23 1837
给 el-menu 加上 :default-active="this.$route.path"问题描述： 使用el-menu 实现管理系统左侧菜单栏的时候，刷新页面，菜单栏的选中状态消失。
vue用session存取数据
txyllyyj的博客
11-19 8113
vue用session存取数据
antd(ant design) Menu组件库使用总结（React）
热门推荐
Venchi的博客
05-25 5万+
原创1. 使submenu可点击：title属性设置为链接即可。&lt;SubMenu                    key={`/site/${site}`}                    className={`${styles.bg}`}                    title={&lt;Link to={`/sub1`}&gt;标题&lt;/Link&gt; } ...
elementui select可创建数据并localStorage存储
wx254418276的博客
10-23 754
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt.
elementUI,localstorage缓存table高亮行
lllsj的博客
07-03 613
之前localstorage 缓存,明明存进去了,打印出来都没有问题,但是高亮行就是记不住选中状态.摸爬滚打之后得到解决方案 在mounted()生命周期中,拿到的hasStorage跟 循环数组拿到的数据 打印出来完全一样,但是 并不好用,可能是dom渲染问题? 解决方案: 把table data数组遍历, 然后用hasStorage的值去跟item 比.一样的话, 传 data[i]!!! ...
解决Vue中Element-UI组件使用常见问题
"关于在Vue项目中使用Element-UI框架时可能遇到的问题及解决方案的文档" Element-UI是基于Vue.js的一个流行前端组件库，提供了丰富的UI组件，如表格、按钮、下拉菜单等，用于快速构建美观的企业级前端应用。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值