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

最新推荐文章于 2025-07-04 21:41:19 发布
原创 最新推荐文章于 2025-07-04 21:41:19 发布 · 949 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #html5

本文介绍了解决Vue项目中页面刷新后导航栏高亮位置错误的问题。通过在导航点击事件中存储索引到sessionStorage，并在登录组件中清除sessionStorage数据，确保了导航状态的一致性和初始值的正确性。

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

解决办法：

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

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

vue3+element-plus：解决侧边导航在页面刷新后失去高亮的问题，导航菜单使用vue-router刷新后高亮显示不一致完美解决办法（导航menu高亮变色问题，无需大改动即可解决，详细实例代码
高级前端工程师
08-17 4474
vue3 element中导航menu高亮变色问题，Element-Plus导航栏刷新高亮消失，页面刷新后侧边导航失去高亮，导航栏根据路由改变状态，Vue3中使用el-menu高亮显示问题，菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项，element-plus menu 设置default-active 页面刷新时 导航高亮 踩坑，解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失，解决Vue3 使用Element-Plus导航刷新active高亮消失，el-menu添加router属性文字颜色选中激
vue项目解决刷新后，导航菜单高亮显示的位置不对
qq_42972187的博客
06-15 5454
1本人在学vue项目时遇到一个坑、在写vue项目头部导航时，比如点击第三个，刷新后，高亮状态显示在第一个： 现在是点击第三个页面 刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态； 捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分； 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0，触发点击事件contact时候会...
解决Vue 刷新页面导航显示高亮位置不对问题
11-28
首先：现在是我点击在产品介绍页面 但是当我刷新页面后高亮位置就变成了第一个 在头部组件里面控制导航高亮显示是checked,默认值是0，触发点击事件会重新赋值，跳转路由，当刷新页面，checked值是0，所以要监听checked时刻发生变化；利用到vue的父子和子父传值；监听状态的变化 子页面将值传给父页面 父页面接收传过来的值 父组件把值传给header头部组件，头部组件通过prop接收 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
10-16
今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 刷新页面导航显示高亮位置不对-----已解决
JS 实现全选和反选
12-24 1546
Vue 刷新页面导航菜单显示高亮位置不对
vue+element导航栏高亮显示的解决方式
10-16
3. 为了解决刷新页面后导航栏高亮显示可能不一致的问题，需要监听路由的变化。通过watch选项来监视$router对象的path变化，当检测到路由变化时，手动设置default-active绑定的变量为当前路由路径。 4. 示例代码如下...
Vue页面手动刷新,实现导航栏激活项还原到初始状态
10-14
总之，Vue页面在手动刷新后，为了恢复导航栏的初始状态，我们需要在组件创建后获取当前路由并更新`defaultActiveIndex`的值，同时监听路由变化以应对动态导航。通过这种方式，无论页面是否被刷新，都能保持导航栏的...
VUE学习记录（二）antd design 刷新后导航菜单与当前页面保持同步
qq_42590021的博客
02-06 1482
一、保持菜单选中同步 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 1502
用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 1791
1.如果容器是window的话。滚动页面高亮锚点没跟着改变 检查body的高度 或者说容器高度 是不是100vh 2.点击锚点没有滚动条动画的话 加上 e.preventDefault() 阻止使用a标签跳转 <Anchor className={styles.AnchorWrap} onClick={handleClick}> // onClick={handleClick} 加上这个 {anchorText.map((item, index) =&
22-使用Ant Design Vue的锚点组件Anthor点击跳转无效问题解决
最新发布
weixin_46675693的博客
07-04 367
前提条件：目前在用Ant Design Vue的最新版本4.2.6，写法如下（此为文档示例），结果在点击的时候，页面没有根据点击的标题滑动到对应位置。由于Ant Design Vue的版本可能有些旧版的浏览器不太支持使用，要想此功能在全浏览器中使用，就需要考虑兼容性，所以此处需自定义点击事件。一般情况下，现代的浏览器（Chrome、Firefox、Edge、Safari 等）都支持平滑滚动，也就是。：例如早期版本的 Safari 或移动端浏览器（如 iOS 上的旧版 Safari）可能未实现该属性。
vue页面出去时vux存页面高度,再进来时回到原来高度
ljw_jiawei的博客
06-09 2428
        //html文件 created(){ }, beforeRouteLeave(to, from, next) { //从这个页面出去的时候执行这里     try {       let top = document.documentElement.scrollTop || document.body.scrollTop; // 得到当前高       let sc...
vue进入新页面，与原页面滚动到相同高度的解决方案
weixin_46020146的博客
07-22 301
vue进入新页面，与原页面滚动到相同高度的解决方案
vue页面跳转后样式变更，刷新可恢复
weixin_45915769的博客
02-13 1354
这个问题出现在A页面，多次测试之后发现，从C/D/E等页面跳转到A页面均不会出现此情况，只有从B页面跳转到A页面的时候会出现。于是乎观察了A/B页面的标签及格式。今天被师傅cue到一个小问题，说user在使用系统时有时会出现标签样式变窄，无法输入需要刷新才能恢复的情况。（可以通过查看A页面中错乱的元素 看B页面中是否也有此元素）原因：B页面中的CSS样式作用到了A页面中的对应元素。解决方式：A、B页面的CSS样式都加上。（表示仅作用于当前页面）
关于公共组件搜索框在搜索页面不起作用的问题
weixin_43844392的博客
01-16 698
上面的组件是一个公共组件，我们在搜索框输入内容，然后点击搜索框跳转到搜索的结果页，当我问在搜索的结果页再次调用搜索框的时候相当于从当前的搜索页在一次跳转到搜索页同页面跳转。参数改变但是页面没办法更新 其实这个问题的本质是：同页面跳转，只改变参数，但是页面不刷新 分析：其实导致这个问题最主要的原因是因为：vue的路由切换实际上是组件之间的切换引用相同的组件时页面不更新 解决办法：监听路由 wat...
vue项目中input框修改时页面数值随之改变的bug
前端职场小白_炜晨科技的博客
08-18 1066
点击click按钮时数值随之改变的bug,改变数值(例如input框中的文字),页面也会随之改变,因为v-model双向绑定的原因。data中定义一个值,用深拷贝方法,将父组件中传过来的值,赋值给新值,dom层v-model的值也需改变result.name等等。...
Cascader 级联选择器无法高亮问题
qq_64069576的博客
05-29 949
但是在自己测试的时候发现一个问题，就是刚开始进入这个页面的时候已选中的选项不会高亮，这就不美好了，我不想这样， 我希望 Cascader 级联选择器默认第最后一个选项且我刚进入这个页面的时候最后一个选项就要显示高亮，options 的数据格式是树形结构。我刚开始是在el-cascader组件绑定一个change事件，每次点击都可以获得一个数组 我开始是采用简单的取数组值 value[value.length - 1]，但是这并不能解决高亮问题，于是我去官网逛了一圈，果然让我找到了一个解决方案。
Vue前端组件：实现首页导航栏与菜单栏布局
资源摘要信息:"本文档旨在探讨如何在使用Vue.js框架的Web应用中设计和实现首页的导航栏和左侧菜单栏。Vue.js作为一种流行的前端JavaScript框架，非常适合用来构建交互式的用户界面。导航栏通常位于页面顶部，负责...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

qq_1075654056

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

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

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

打赏作者

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

抵扣说明：

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

余额充值