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

相关推荐
天天摸鱼的java工程师4 分钟前
互联网行业能力解刨:从Java后端八年开发经验看
前端·后端·程序员
FlyingBird~8 分钟前
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
java·javascript·typescript
brzhang11 分钟前
Android 16 卫星连接 API 来了,带你写出「永不失联」的应用
前端·后端·架构
John_ToDebug25 分钟前
Chrome 浏览器前端与客户端双向通信实战
前端·c++·chrome
要加油哦~29 分钟前
CSS | transition 和 transform的用处和区别
前端·css
小鱼人爱编程40 分钟前
现代大前端是如何编码的?
android·前端·flutter
神仙别闹43 分钟前
基于Java+VUE+MariaDB实现(Web)仿小米商城
java·前端·vue.js
袁煦丞1 小时前
低成本私有云存储方案Nas-Cab:cpolar实验室第508次成功挑战
前端·程序员·远程工作
小公主1 小时前
「前端必备」Flex 布局全解析:从入门到深度计算,搞懂弹性盒子!
前端·css
江城开朗的豌豆1 小时前
前端性能救星!用 requestAnimationFrame 丝滑渲染海量数据
前端·javascript·面试