解决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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
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控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
windows下python安装小白入门教程
2018/09/18 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python matplotlib实时画图案例
2020/04/23 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
女儿十岁生日答谢词
2014/01/27 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
python 字典和列表嵌套用法详解
2021/06/29 Python