解决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 相关文章推荐
使用js获取地址栏中传递的值
Jul 02 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
让python json encode datetime类型
2010/12/28 Python
Python中运行并行任务技巧
2015/02/26 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python使用进程Process模块管理资源
2020/03/05 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
Ejb技术面试题
2015/04/29 面试题
庆元旦迎新年广播稿
2014/02/18 职场文书
学徒工职责
2014/03/06 职场文书
销售类求职信
2014/06/13 职场文书
党校学习心得体会范文
2014/09/09 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
数学教师求职信范文
2015/03/20 职场文书
交通事故调解协议书
2015/05/20 职场文书
人事任命书范本
2015/09/21 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers