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

相关推荐
恋猫de小郭2 分钟前
2026 Android I/O ,全新 AI 手机、 Android PC 和车载驾驶
android·前端·flutter
yqcoder2 分钟前
突破性能瓶颈:深入理解 JavaScript TypedArray
java·开发语言·javascript
yqcoder3 分钟前
JS 中的“空”之双雄:null vs undefined
开发语言·前端·javascript
计算机安禾6 分钟前
【c++面向对象编程】第8篇:const成员与mutable:常对象与常函数
开发语言·javascript·c++
浩~~6 分钟前
AI-Web 靶场
java·前端·网络
MandalaO_O7 分钟前
Java Web :JDBC CRUD 与前后端交互
java·前端·交互
RPGMZ2 小时前
RPGMZ游戏引擎 一个窗口 文本居中显示
开发语言·javascript·游戏引擎·rpgmz
海石7 小时前
📱随时随地大小编:TraeSolo 移动端初体验
前端·ai编程·trae
爱滑雪的码农8 小时前
详细说说React大型项目结构以及日常开发核心语法
前端·javascript·react.js
七牛开发者9 小时前
HTML is the new Markdown:来自 Claude Code 团队的实践
前端·人工智能·语言模型·html