vue项目解决刷新后,导航菜单高亮显示的位置不对

在学习Vue项目时,作者遇到了一个问题:点击第三个导航菜单后刷新,高亮显示却回到了第一个。尽管实际内容仍是第三个页面,但导航状态错误。通过检查并修复`checkindex`状态,使用Vue的父子组件通信来保存和传递高亮位置,成功解决了这个问题。主要包括子页面向父页面传递状态,父页面接收并传递给Header子组件,确保刷新后导航正确高亮。
摘要由CSDN通过智能技术生成

1本人在学vue项目时遇到一个坑、在写vue项目头部导航时,比如点击第三个,刷新后,高亮状态显示在第一个:
有下划线
现在是点击第三个页面 刷新后,是第一个页面高亮显示,但是因为路由路径没有改变页面内容还是第三个页面内容,改变的是导航的状态;
在这里插入图片描述
捯饬了好久才搞出来,伤的不轻,看控制导航状态的代码部分;
在这里插入图片描述
在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0,触发点击事件contact时候会重新赋值,跳转路由,一旦刷新页面,这个checkindex的值就是0,所以要把这个checkindex值记录下来,时刻监听到变化;利用到vue的父子和子父传值;监听状态的变化
1、子页面把状态把值传给父页面在这里插入图片描述
2、父页面接收传过来的值;
在这里插入图片描述
3.在把接收的值传给header子组件,子组件接收
在这里插入图片描述

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值