Vue3使用element plus时el-menu导航选中后刷新页面及修改URL无法保持当前选中状态问题

问题1:

在使用element plus的el-menu菜单导航时,发现选中后刷新高亮部分无法保持当前选择状态

解决方法:

因为刷新页面后el-menu的:default-active="activeIndex"被刷新,无法记录所以导致高亮部分无法保持选择状态

所以为了保持下来这个值,我们可以用localStorage或者sessionStorage来持久化储存当前选择的菜单项

然后在onMouted 或者 created构造获取一次即可 (注意 vue3的语法糖setup)

问题2:

修改URL也是无法保持选择状态

解决方法:

我用了页面监听 watch,当监听到route.path改变时,activeIndex改变

相关推荐
江城开朗的豌豆6 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician11 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
Django强哥14 分钟前
JSON Schema Draft-07 详细解析
javascript·算法·代码规范
FIN666825 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD35 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆35 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel38 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
Never_Satisfied1 小时前
在JavaScript / HTML中,Chrome报错此服务器无法证实它就是xxxxx - 它的安全证书没有指定主题备用名称
javascript·chrome·html