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

相关推荐
quo-te9 分钟前
AJAX简介
前端·ajax·okhttp
bingbingyihao20 分钟前
通过代码获取接口文档工具
开发语言·前端·javascript
月伤5920 分钟前
JS中Map对象与数组的相互转换
前端·javascript·html
SEO_juper2 小时前
解密 URL 参数:如何利用它们提升网站性能和用户体验
前端·javascript·ux·seo·url·数字营销·谷歌seo
nuIl2 小时前
让 Cursor 帮你把想法落地
前端·ai编程
HyaCinth2 小时前
Taro 数字滚动组件
javascript·react.js·taro
去伪存真2 小时前
看我如何破解api接口文档定义空白, 还不想手动写接口TS类型定义的困局
前端·typescript
skyWang4162 小时前
Vite模块联邦(vite-plugin-federation)实现去中心化微前端后台管理系统架构
前端
喝拿铁写前端2 小时前
你以为你是中级前端,其实你还停留在执行阶段-完整前端成长之路
前端
前端卧龙人3 小时前
uniapp开发技巧:开启代理与gzip优化实践
前端