解决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中append()方法用法实例
Dec 25 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
浅谈JavaScript中this的指向更改
Jul 28 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入门学习笔记之一
2010/10/12 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
详解Django中的过滤器
2015/07/16 Python
Python作用域用法实例详解
2016/03/15 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
想学画画?python满足你!
2020/12/24 Python
python3 kubernetes api的使用示例
2021/01/12 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
兼职业务员岗位职责
2014/01/01 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
爱耳日活动总结
2014/04/30 职场文书
上课不认真检讨书
2014/09/17 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript