解决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实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
JavaScript表单验证实现代码
May 22 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
原生js生成图片验证码
Oct 11 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP 验证码的实现代码
2011/07/17 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python之文件读取一行一行的方法
2018/07/12 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
Java里面如何创建一个内部类的实例
2015/01/19 面试题
行政人事岗位职责
2014/03/17 职场文书
开学典礼演讲稿
2014/05/23 职场文书
小学毕业感言100字
2015/07/30 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers