解决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 实现简单的table排序及table操作练习
Dec 28 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
详解JavaScript之ES5的继承
Jul 08 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
Snoopy类使用小例子
2008/04/15 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
numpy.where() 用法详解
2019/05/27 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
上级检查欢迎词
2014/01/18 职场文书
无私奉献演讲稿
2014/09/04 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
volatile保证可见性及重排序方法
2022/08/05 Java/Android