解决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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
React组件中的this的具体使用
2018/02/28 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
教师档案管理制度
2014/01/23 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
三八妇女节慰问信
2015/02/14 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书