解决Vue 刷新页面导航显示高亮位置不对问题


Posted in Javascript onDecember 25, 2019

首先:现在是我点击在产品介绍页面

解决Vue 刷新页面导航显示高亮位置不对问题

但是当我刷新页面后高亮位置就变成了第一个

解决Vue 刷新页面导航显示高亮位置不对问题
解决Vue 刷新页面导航显示高亮位置不对问题

在头部组件里面控制导航高亮显示是checked,默认值是0,触发点击事件会重新赋值,跳转路由,当刷新页面,checked值是0,所以要监听checked时刻发生变化;利用到vue的父子和子父传值;监听状态的变化

子页面将值传给父页面

解决Vue 刷新页面导航显示高亮位置不对问题

父页面接收传过来的值

解决Vue 刷新页面导航显示高亮位置不对问题

父组件把值传给header头部组件,头部组件通过prop接收

解决Vue 刷新页面导航显示高亮位置不对问题

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图改变一个 prop 的情形:

1.这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,
 最好定义一个本地的 data 属性并将这个 prop 用作其初始值:
	props: ['initialCounter'],
		data: function () {
		 return {
		 counter: this.initialCounter
		 }
	}
2.这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
		props: ['size'],
			computed: {
			 normalizedSize: function () {
			 return this.size.trim().toLowerCase()
			 }
		}

这里我用的是第二种:

解决Vue 刷新页面导航显示高亮位置不对问题

以上就是解决了页数刷新高亮显示错误的办法了 存下

总结

以上所述是小编给大家介绍的解决Vue 刷新页面导航显示高亮位置不对问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
vue实现搜索过滤效果
May 28 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 #Javascript
如何基于JS截获动态代码
Dec 25 #Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 #Javascript
vue远程加载sfc组件思路详解
Dec 25 #Javascript
node实现mock-plugin中间件的方法
Dec 25 #Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 #Javascript
vue分页插件的使用方法
Dec 25 #Javascript
You might like
php之字符串变相相减的代码
2007/03/19 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python 中的 else详解
2016/04/23 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python3实现磁盘空间监控
2018/06/21 Python
Python内存管理实例分析
2019/07/10 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python Zmail模块简介与使用示例
2020/12/19 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
2014年小班元旦活动方案
2014/02/16 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
新文化运动的基本口号
2014/06/21 职场文书
单位工作证明书格式
2014/10/04 职场文书
法人代表证明书范本
2015/06/18 职场文书
新年祝酒词大全
2015/08/11 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
导游词之上饶龟峰
2019/10/25 职场文书