解决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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
摘自启点的main.js
2008/04/20 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python模块之time模块(实例讲解)
2017/09/13 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
优秀团队获奖感言
2014/02/19 职场文书
党日活动总结
2014/05/07 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
苏州园林导游词
2015/02/03 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
python画条形图的具体代码
2022/04/20 Python
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android