解决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比较文档位置
Apr 08 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
layui树形菜单动态遍历的例子
Sep 23 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
原生JS实现留言板
2020/03/26 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Python中index()和seek()的用法(详解)
2017/04/27 Python
python 文件操作删除某行的实例
2017/09/04 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
浅谈python 类方法/静态方法
2020/09/18 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
外企办公室竞聘演讲稿
2013/12/29 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
一年级学生期末评语
2014/04/21 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
保研推荐信范文
2015/03/25 职场文书
消防安全培训工作总结
2015/10/23 职场文书
python如何获取网络数据
2021/04/11 Python