Vue3使用element plus时el-menu导航选中后刷新页面及修改URL无法保持当前选中状态问题

news/2024/10/16 22:16:08 标签: vue.js, javascript, 前端

问题1:

在使用element plus的el-menu菜单导航时,发现选中后刷新高亮部分无法保持当前选择状态

解决方法:

因为刷新页面后el-menu的:default-active="activeIndex"被刷新,无法记录所以导致高亮部分无法保持选择状态

所以为了保持下来这个值,我们可以用localStorage或者sessionStorage来持久化储存当前选择的菜单项

然后在onMouted 或者 created构造获取一次即可 (注意 vue3的语法糖setup)

问题2:

修改URL也是无法保持选择状态

解决方法:

我用了页面监听 watch,当监听到route.path改变时,activeIndex改变


http://www.niftyadmin.cn/n/5708615.html

相关文章

mysql 09 独立表空间结构

表空间中的页实在是太多了,为了更好的管理这些页面,设计 InnoDB 的大叔们提出了 区 (英文名: extent )的概念。对于16KB的页来说,连续的64个页就是一个 区 ,也就是说一个区默认占用1MB空间大小。…

网络爬虫-数美滑块验证码

仅供研究学习使用。 今天带来的是数美滑块验证码的逆向 目标站 --> 传送门 解决此类验证码 首先要解决滑动距离的判定 无论是使用selenium还是使用协议的方式来破解 都绕不开滑动距离的识别 滑动距离可以参考以前我博客上的方式,或者找一找开源的一些算法&am…

C++进阶 AVL树的讲解以及实现

你好,欢迎阅读我的文章~ 个人主页:Mike 所属专栏:C进阶 目录 1. AVL的概念 2.AVL树的实现 2.1AVL树的结构 2.2AVL树的插入 2.2.1 插入的过程 2.2.2 平衡因子的更新 2.2.3 更新停止的条件 插入节点以及更新平衡因子的源码 3.AVL的旋…

Unity3D模型消融方法(一)

系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、消融效果👉二、使用步骤👉2-1.交互代码2-2. 完整shader代码👉2-3 新建材质球👉壁纸分享👉总结👉前言 今天介绍一下模型消融效果(shader实现) 还有另外一种换shader实现 大家好,我是心疼你的一切,…

使用tgz包下载安装clickhouse低版本

1.下载安装包 官方下载地址:https://packages.clickhouse.com/tgz/stable 阿里云下载地址:clickhouse-tgz-stable安装包下载_开源镜像站-阿里云 共需要下载四个文件 clickhouse-common-static-20.3.10.75.tgz clickhouse-common-static-dbg-20.3.10.7…

大数据-174 Elasticsearch Query DSL - 全文检索 full-text query 匹配、短语、多字段 详细操作

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

【项目经验分享】Stable Diffusion生成式扩散模型毕业设计项目案例定制

关于Stable Diffusion生成式扩散模型的毕业设计题目,这些题目涵盖了该模型的应用、优化、创新以及与其他领域的结合: 基础应用与优化 Stable Diffusion生成效果与风格控制技术研究Stable Diffusion模型在图片去噪中的应用基于Stable Diffusion的高分辨…

人工智能学习框架

人工智能学习框架是指用于开发和训练机器学习和深度学习模型的软件库和工具集。这些框架帮助开发者更高效地构建、训练和部署模型,加速人工智能应用的开发进程。 常见的人工智能学习框架 TensorFlow 由Google开发,是一个开源的深度学习框架,…