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


Posted in Javascript onNovember 01, 2019

1本人在学vue项目时遇到一个坑、在写vue项目头部导航时,比如点击第三个,刷新后,高亮状态显示在第一个:

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

现在是点击第三个页面 刷新后,是第一个页面高亮显示,但是因为路由路径没有改变页面内容还是第三个页面内容,改变的是导航的状态;

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

?意亮撕镁貌鸥愠隼矗?说牟磺幔?纯刂频己阶刺?拇?氩糠郑?/p>

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

在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0,触发点击事件contact时候会重新赋值,跳转路由,一旦刷新页面,这个checkindex的值就是0,所以要把这个checkindex值记录下来,时刻监听到变化;利用到vue的父子和子父传值;监听状态的变化

1、子页面把状态把值传给父页面

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

2、父页面接收传过来的值;

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

3.在把接收的值传给header子组件,子组件接收

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

以上这篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
vue实现点击追加选中样式效果
Nov 01 #Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 #Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 #Javascript
微信js-sdk 录音功能的示例代码
Nov 01 #Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 #Javascript
vue实现计步器功能
Nov 01 #Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 #Javascript
You might like
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
玩转python爬虫之正则表达式
2016/02/17 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python中如何导入类示例详解
2019/04/17 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
自我鉴定怎么写
2013/12/05 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
nginx 配置指令之location使用详解
2022/05/25 Servers