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

相关推荐
REDcker几秒前
前端打包工具 - Rollup 打包工具笔记
前端·笔记
前端大卫3 分钟前
动态监听DOM元素高度变化
前端·javascript
Cxiaomu14 分钟前
React Native App 图表绘制完整实现指南
javascript·react native·react.js
前端大卫17 分钟前
Webpack 老项目的优化实践
前端
开利网络25 分钟前
合规底线:健康产品营销的红线与避坑指南
大数据·前端·人工智能·云计算·1024程序员节
yinuo36 分钟前
纯CSS&JS实现:丝滑渐变过渡的动态导航栏
前端
qq. 280403398437 分钟前
vue介绍
前端·javascript·vue.js
未来之窗软件服务41 分钟前
未来之窗昭和仙君(五十五)标签票据打印模板设计器——东方仙盟筑基期
前端·打印设计器·仙盟创梦ide·东方仙盟·昭和仙君·东方仙盟架构
Mr.Jessy1 小时前
Web APIs 学习第五天:日期对象与DOM节点
开发语言·前端·javascript·学习·html
前端大卫1 小时前
如何统一前端项目的 Node 版本和包管理器?
前端