解决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实现仿银行密码输入框效果的代码
Dec 13 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
Vue的生命周期操作示例
2019/09/17 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
python实现自动更换ip的方法
2015/05/05 Python
python实现K最近邻算法
2018/01/29 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
党校培训自我鉴定
2014/02/01 职场文书
爱牙日活动总结
2014/08/29 职场文书
个人委托书范文
2015/01/28 职场文书
个人党性分析总结
2015/03/05 职场文书
追悼会悼词大全
2015/06/23 职场文书
学雷锋活动简报
2015/07/20 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python