解决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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
比较简单的异步加载JS文件的代码
Jul 18 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
模拟select的代码
2011/10/19 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
python编程实现希尔排序
2017/04/13 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python3实现多线程聊天室
2018/12/12 Python
python队列Queue的详解
2019/05/10 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
经典公益广告词
2014/03/13 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
取保候审保证书
2014/04/30 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
好的旅游活动方案
2014/08/19 职场文书
一份文言文检讨书
2014/09/13 职场文书
法人授权委托书样本
2014/09/19 职场文书
离婚协议书范文2014
2014/10/16 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS