vue3 element plus NavMenu 导航无法选中(同级页面跳转,导航无法高亮)

2023-11-13

需求:

导航选中的是公司信息,当跳转到公司信息编辑的时候,上面的导航公司信息还是要选中状态,点击导航,回到信息展示页面,下面是我的路由

在vue2里面  使用element ui,像下面这样做是可以的

动态给el-menu-item的index赋值,获取当前页面的路径,动态传给index

但是在vue3里面用的element plus   这样用不行了,只有在首次刷新的时候(或者页面刚跳转进去的时候)给index赋的值有效,后面点击之后,index的值好像并没有改变,我打印出来看了一下,路径确实是动态获取到的,但是index好像并没有更新

这里通过el-men的select事件,打印出来的值可以看到,index path并没有改变(不知道是不是最新的这个版本有问题)

我初始化刷新的是这个页面,选中状态没有问题

 

当我点击公司信息  回到信息展示页面的时候,没有高亮状态

这时候看控制台的输出

这时候的index 和index path  都还是信息编辑页面的,所以跳转到信息展示页面之后,index绑定的值还是上个页面的,和当前的default-active不一致,所以导航并不会高亮。

 

 

解决办法:

其实这个el-menu-item的index值,就只是用来控制导航记得激活样式的,只要index的值和default-active一致,导航就会选中,

导航的跳转路由,有专门的router属性,所以,想要同一个导航链接,对应对个页面都显示高亮状态时,就把这些页面共同的值赋值给el-menu-item的index就行

拿我这个举例:

我在对应相同链接下的路由里,在mate里都添加了一个相同的name属性,

然后在组件上,default-active绑定的是当前路由下面mate里的name,el-menu-item的index也绑定对应的name,这样不管怎么跳转,只要default-active绑定的name与el-menu-item绑定的index的name一致,这个el-menu-item就会是高亮状态

总结

1、导航不显示高亮状态,就是el-menu-item 的index的值和default-active绑定的值不一致

2、el-menu-item 的index只是一个标志,真正的路由跳转是由router属性控制的

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3 element plus NavMenu 导航无法选中(同级页面跳转,导航无法高亮) 的相关文章

随机推荐

  • hyperledger fabric各版本更新内容

    fabric各版本文档 fabric各版本更新内容 fabric 最新版本 fabric2 5更新内容 fabric2 4更新内容 fabric2 3更新内容 fabric2 2更新内容 fabric2 1更新内容 fabric2 0更新内
  • Ansible中vars(变量)定义

    1 变量使用的原因 playbook的编写是使用yml的语法 虽然该语法规则较为简单 但是 同其他语法相同该语法也有变量 循环等机制的使用 变量的使用就是为了提高我们所写剧本的复用性 当某个参数更改时 直接更改变量的赋值 无需更改剧本中的每
  • 最近大热的 chatGPT 会取代你的工作吗?

    ChatGPT 由于其高效的自然语言处理能力 它最容易取代的领域可能是 文本分类 ChatGPT 可以用作文本分类系统 对文本进行分类 聊天机器人 ChatGPT 可以制作聊天机器人 提供人性化的交互体验 文本生成 ChatGPT 可以生成
  • 小米生态企业强力推荐的开源免费SRM采购管理平台功能介绍

    本文节选自Odoo亚太金牌服务机构 开源智造 所编写的 ERP真的免费不花钱 Odoo应用指南 如需获取完整的知识内容 请至开源智造官网免费获取 感谢网友一键三连 点赞 转发 收藏 您的支持是我们最大的前进动力 概述 采购工作起源于采购请求
  • swagger设置字段required必填

    swagger注解中需要设置请求参数的字段是必须填写的还是非必须的 我们需要添加下面的配置 只需要在对象的字段中增加下面的代码 ApiModelProperty value 自建应用的corpid required true 显示效果如下
  • Vulnhub实战-prime1

    前言 VulnHub 是一个面向信息安全爱好者和专业人士的虚拟机 VM 漏洞测试平台 它提供了一系列特制的漏洞测试虚拟机镜像 供用户通过攻击和漏洞利用的练习来提升自己的安全技能 本次 我们本次测试的是prime1 一 主机发现和端口扫描 查
  • Python 、Pychorm 、 Opencv安装及环境变量的配置--opencv不能调用cv2

    Python Pychorm Opencv安装及环境变量的配置 Python安装及环境变量的配置 1 Python下载安装 官网下载Python安装包 Python官网 https www python org Python在安装时 提示可
  • flex 一行两个_flex 方式的布局你用对了吗?

    对于 CSS 中的 flex 弹性布局 曾经我在公众号里写过 一点点对 flex 布局有关的看法 和 又一次想说 flex 布局挖坑给你 信吗 印象中最深的一个点 是我在文中提到的对于 flex 的这个属性中的三个属性值怎么用的话题 如果你
  • 初等变换法求解线性方程组

    初等变换 通过初等行 列同理 变换把增广矩阵变为简化阶梯型矩阵的线性方程组求解算法 具体步骤 枚举每一列 找到枚举的当前列绝对值最大数的所在行 将该行换到最上面一行 第r行 将该行第一个数 该行第c列元素 消成1 将该行第一个元素 该行第c
  • PCB中如何区分电源线和信号线

    在电路设计中 我们需要区分电源线和信号线 电源线主要负责传输电能和提供稳定的电压给整个电路系统 而信号线则传输各种数据 信息和控制电路 当我们开始画 PCBA 时 通常会采用颜色编码来区分电源线和信号线 以下是一些常见的方法 电源线通常使用
  • 常用邮件客户端软件设置

    文章来源 http service mail qq com cgi bin help subtype 1 id 28 no 371 2 您可以使用支持POP3的客户端软件 例如Foxmail或Outlook 收发您的邮件 请配置您的电子邮件
  • CentOS7搭建httpd服务

    文章目录 httpd 1 httpd安装 使用yum安装 httpd命令 curl命令 编译安装httpd 2 4 2 httpd常用配置 访问控制法则 3 虚拟主机 相同ip不同端口的配置 不同IP相同端口配置 相同IP相同端口不同域名配
  • QT Creator工具介绍及使用

    一 QT的基本概念 QT主要用于图形化界面的开发 QT是基于C 编写的一套界面相关的类库 如进程线程库 网络编程的库 数据库操作的库 文件操作的库等 如何使用这个类库 类库实例化对象 构造函数 gt 学习类库中方法 函数 的使用 gt 后台
  • 今天觉得自己太菜了!!!!

    今天觉得自己太菜了 转载于 https www cnblogs com zhangzheny archive 2007 01 24 629460 html
  • 如何检测tensorflow是否使用CPU还是GPU计算

    输入如下命令 python import tensorflow as tf sess tf Session config tf ConfigProto log device placement True 若包含CPU信息 则使用了CPU 若
  • GBDT 学习

    花絮 最近加班疯掉了 比九九六还要多 不行啊 这个便宜一定要从老板身上占回来 另外不知道朋友们是怎么学习一个新算法的 不过我一般是直接百度很多关于这个算法的博客来看 你会发现有些地方可能相互补充 有的地方可能互相矛盾 这种情况可不少见 总之
  • python是一门面向对象的编程语言_python面向对象(面向对象、面向过程、类、参数self)...

    年轻人 你渴望力量吗 你渴望拥有对象吗 让我们面向对象 重建 家园 吧 一 面向对象的简介 众所周知 python是一门面向对象的编程语言 但是 你知道什么是面向对象吗 在说面向对象之前 我们先来说一说什么是对象 之前的博客有简单涉入 一
  • ANT 安装使用及build.xml文档模板

    一 安装 下载地址 http archive apache org dist ant 0 前提 已经正确设定了JAVA HOME的系统变量 1 直接解压 到D apache ant 1 7 2 系统环境变量中设置 path 加上 D apa
  • chatgpt赋能powershell

    最近chatgpt非常火爆 获得超高曝光度的同时 也让大家对ai和ai工具有了新的认识 关于chatgpt 可以参考这篇文章 今天主要推荐一个可以与powershell集成的ai工具 其后端也是openai的服务 可以有效提高工作效率 Po
  • vue3 element plus NavMenu 导航无法选中(同级页面跳转,导航无法高亮)

    需求 导航选中的是公司信息 当跳转到公司信息编辑的时候 上面的导航公司信息还是要选中状态 点击导航 回到信息展示页面 下面是我的路由 在vue2里面 使用element ui 像下面这样做是可以的 动态给el menu item的index