vue项目：页面刷新后，导航栏高亮位置不对问题

最新推荐文章于 2023-05-29 23:12:07 发布
最新推荐文章于 2023-05-29 23:12:07 发布
阅读量914 收藏 1
点赞数 2
CC 4.0 BY-SA版权
文章标签： vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33991007/article/details/103892823
本文介绍了解决Vue项目中页面刷新后导航栏高亮位置错误的问题。通过在导航点击事件中存储索引到sessionStorage，并在登录组件中清除sessionStorage数据，确保了导航状态的一致性和初始值的正确性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决vue项目页面刷新后，导航栏高亮位置不对问题

解决办法：

导航组件：
在这里插入图片描述

在这里插入图片描述
点击事件中将索引存入sessionStorage中即可解决问题，如下图所示：
在这里插入图片描述
在这里插入图片描述
登录组件：
在这里插入图片描述
最后在登陆界面中将sessionStorage中数据全部清除即可（防止重新登录索引不为初始值）！！！

vue项目解决刷新后，导航菜单高亮显示的位置不对
qq_42972187的博客
06-15 5434
1本人在学vue项目时遇到一个坑、在写vue项目头部导航时，比如点击第三个，刷新后，高亮状态显示在第一个： 现在是点击第三个页面 刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态； 捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分； 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0，触发点击事件contact时候会...
Vue：如何保持导航栏的高亮状态
weixin_45745641的博客
07-27 2306
我们在利用Vue写后台管理系统时，对于导航栏我们需要保持其处于选择的高亮状态，大概要经过如下三个步骤： 为所需要的点击的二级菜单栏设置点击事件，把对应的index值保存在sessionStorage中 当页面刚被刷新创建时，将sessionStorage中的值取出来赋值给菜单栏进行激活 点击每一个二级菜单栏时，要给activePath重新赋值 下面来看一下具体的实现过程： 1.为二级菜单栏绑定点击事件saveNavState 2.把对应的index值保存在sessionStorage中 saveNav
解决Vue 刷新页面导航显示高亮位置不对问题
10-15
主要介绍了解决Vue 刷新页面导航显示高亮位置不对问题,本文图文实例相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 刷新页面导航显示高亮位置不对-----已解决
JS 实现全选和反选
12-24 1507
Vue 刷新页面导航菜单显示高亮位置不对
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
10-16
今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+element导航栏高亮显示的解决方式
10-16
3. 为了解决刷新页面后导航栏高亮显示可能不一致的问题，需要监听路由的变化。通过watch选项来监视$router对象的path变化，当检测到路由变化时，手动设置default-active绑定的变量为当前路由路径。 4. 示例代码如下...
Vue页面手动刷新,实现导航栏激活项还原到初始状态
10-14
总之，Vue页面在手动刷新后，为了恢复导航栏的初始状态，我们需要在组件创建后获取当前路由并更新`defaultActiveIndex`的值，同时监听路由变化以应对动态导航。通过这种方式，无论页面是否被刷新，都能保持导航栏的...
VUE学习记录（二）antd design 刷新后导航菜单与当前页面保持同步
qq_42590021的博客
02-06 1448
一、保持菜单选中同步 1.保持菜单的key值与路由相同 ` <a-menu-item key="/WorkBench"> <router-link to="/WorkBench" tag="div"> <a-icon type="bank" /><span>工作台</span></router-link> </a-menu-item>` 2.设置defaultselected
用vant组件库渲染tab时出现底部栏错位问题
weixin_58008365的博客
09-15 1452
用vant组件库渲染tab时出现底部栏错位问题 今天在写页面的时候出现了底部栏错位的问题，问题如图所示： ![在这里插入图片描述](https://img-blog.csdnimg.cn/70dbe365b95e49bda92ed45b630b3c1b.png#pic_center) 代码如下： <div v-show="searchList.length > 0" class="result-title">
antd Anchor锚点踩坑 没动画 高亮
m0_61125795的博客
05-21 1720
1.如果容器是window的话。滚动页面高亮锚点没跟着改变 检查body的高度 或者说容器高度 是不是100vh 2.点击锚点没有滚动条动画的话 加上 e.preventDefault() 阻止使用a标签跳转 <Anchor className={styles.AnchorWrap} onClick={handleClick}> // onClick={handleClick} 加上这个 {anchorText.map((item, index) =&
vue页面出去时vux存页面高度,再进来时回到原来高度
ljw_jiawei的博客
06-09 2416
        //html文件 created(){ }, beforeRouteLeave(to, from, next) { //从这个页面出去的时候执行这里     try {       let top = document.documentElement.scrollTop || document.body.scrollTop; // 得到当前高       let sc...
vue进入新页面，与原页面滚动到相同高度的解决方案
weixin_46020146的博客
07-22 285
vue进入新页面，与原页面滚动到相同高度的解决方案
vue页面跳转后样式变更，刷新可恢复
weixin_45915769的博客
02-13 1322
这个问题出现在A页面，多次测试之后发现，从C/D/E等页面跳转到A页面均不会出现此情况，只有从B页面跳转到A页面的时候会出现。于是乎观察了A/B页面的标签及格式。今天被师傅cue到一个小问题，说user在使用系统时有时会出现标签样式变窄，无法输入需要刷新才能恢复的情况。（可以通过查看A页面中错乱的元素 看B页面中是否也有此元素）原因：B页面中的CSS样式作用到了A页面中的对应元素。解决方式：A、B页面的CSS样式都加上。（表示仅作用于当前页面）
关于公共组件搜索框在搜索页面不起作用的问题
weixin_43844392的博客
01-16 653
上面的组件是一个公共组件，我们在搜索框输入内容，然后点击搜索框跳转到搜索的结果页，当我问在搜索的结果页再次调用搜索框的时候相当于从当前的搜索页在一次跳转到搜索页同页面跳转。参数改变但是页面没办法更新 其实这个问题的本质是：同页面跳转，只改变参数，但是页面不刷新 分析：其实导致这个问题最主要的原因是因为：vue的路由切换实际上是组件之间的切换引用相同的组件时页面不更新 解决办法：监听路由 wat...
vue项目中input框修改时页面数值随之改变的bug
前端职场小白_炜晨科技的博客
08-18 1038
点击click按钮时数值随之改变的bug,改变数值(例如input框中的文字),页面也会随之改变,因为v-model双向绑定的原因。data中定义一个值,用深拷贝方法,将父组件中传过来的值,赋值给新值,dom层v-model的值也需改变result.name等等。...
Cascader 级联选择器无法高亮问题
qq_64069576的博客
05-29 877
但是在自己测试的时候发现一个问题，就是刚开始进入这个页面的时候已选中的选项不会高亮，这就不美好了，我不想这样， 我希望 Cascader 级联选择器默认第最后一个选项且我刚进入这个页面的时候最后一个选项就要显示高亮，options 的数据格式是树形结构。我刚开始是在el-cascader组件绑定一个change事件，每次点击都可以获得一个数组 我开始是采用简单的取数组值 value[value.length - 1]，但是这并不能解决高亮问题，于是我去官网逛了一圈，果然让我找到了一个解决方案。
小程序里使用van-tab底部条位置错乱??
Hassan的小博客!
01-13 1597
van-tab底部条位置错乱
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_1075654056

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值