解决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 EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
node.js实现上传文件功能
Jul 15 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP反射基础知识回顾
2020/09/10 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
mac使用python识别图形验证码功能
2020/01/10 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
若干个Java基础面试题
2015/05/19 面试题
公证委托书模板
2014/04/03 职场文书
五好家庭事迹材料
2014/12/20 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
欠款起诉书范文
2015/05/19 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
MySQL分库分表详情
2021/09/25 MySQL
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫