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改变

相关推荐
漂流瓶jz12 小时前
Webpack如何实现万物皆可import?loader的使用/配置/手写实践
前端·javascript·webpack
ZC跨境爬虫12 小时前
跟着 MDN 学CSS day_41:显式轨道、隐式网格与区域命名放置
前端·javascript·css·ui·交互
修己xj13 小时前
告别手动存图!这款叫 Fatkun 的浏览器插件,简直是素材收集神器
前端
袋鼠云数栈14 小时前
从前端到基础设施,ACOS 如何打通企业全链路可观测
运维·前端·人工智能·数据治理·数据智能
AskHarries14 小时前
系统提示词、开发者指令和用户输入的优先级
java·前端·数据库
Moment14 小时前
长上下文会最终杀死 Rag 吗?
前端·javascript·后端
qcx2314 小时前
【系统学AI】25 论文导读 ①:两篇改变 AI 的开山之作——Attention Is All You Need & ReAct
前端·人工智能·react.js·transformer
kyriewen15 小时前
大文件上传最全指南:分片、断点续传、秒传,一篇就够了
前端·javascript·面试
我叫黑大帅16 小时前
解决聊天页内部滚轮改为页面滚动问题
javascript·后端·面试
郑洁文16 小时前
基于Python的Web命令执行漏洞自动化检测系统
前端·python·网络安全·自动化