解决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 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
javascript实现简易聊天室
Jul 12 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
基于JS实现视频上传显示进度条
May 12 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
javascript eval函数深入认识
2009/02/21 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
js格式化时间小结
2014/11/03 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python3安装speech语音模块的方法
2018/12/24 Python
基于python plotly交互式图表大全
2019/12/07 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
回门宴父母答谢词
2014/01/26 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
学校督导评估方案
2014/06/10 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android