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

相关推荐
PieroPc9 分钟前
用FastAPI 后端 和 Vue3 前端写一个博客系统 例
前端·vue·fastapi
赵民勇17 分钟前
ES5中prototype和prototype.constructor详解
javascript
xiaoyustudiowww18 分钟前
fetch异步简单版本(Tomcat 9)
java·前端·tomcat
TOPGUS19 分钟前
谷歌Chrome浏览器即将对HTTP网站设卡:突出展示“始终使用安全连接”功能
前端·网络·chrome·http·搜索引擎·seo·数字营销
C_心欲无痕26 分钟前
ts - 模板字面量类型与 `keyof` 的魔法组合:`keyof T & `on${string}`使用
linux·运维·开发语言·前端·ubuntu·typescript
Van_captain27 分钟前
rn_for_openharmony常用组件_Tabs选项卡
javascript·开源·harmonyos
赵民勇29 分钟前
ES6中的const用法详解
javascript·es6
一勺菠萝丶31 分钟前
Java 后端想学 Vue,又想写浏览器插件?
java·前端·vue.js
@PHARAOH36 分钟前
HOW - 如何禁用 localstorage
前端·状态模式
霍理迪36 分钟前
CSS布局方式——弹性盒子(flex)
前端·css