解决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 相关文章推荐
杨氏矩阵查找的JS代码
Mar 21 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
WebPack基础知识详解
Jan 16 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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 闭包特性在实际应用中的问题
2009/10/30 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python API len函数操作过程解析
2020/03/05 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python遍历路径破解表单的示例
2020/11/21 Python
python定义具名元组实例操作
2021/02/28 Python
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
征求意见函
2015/06/05 职场文书
单位更名证明
2015/06/18 职场文书
毕业生入职感言
2015/07/31 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书