vue项目解决刷新后，导航菜单高亮显示的位置不对

最新推荐文章于 2023-05-14 18:26:07 发布
最新推荐文章于 2023-05-14 18:26:07 发布
阅读量5.2k 收藏 9
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42972187/article/details/92069557
版权

1本人在学vue项目时遇到一个坑、在写vue项目头部导航时，比如点击第三个，刷新后，高亮状态显示在第一个：
有下划线
现在是点击第三个页面 刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态；
在这里插入图片描述
捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分；
在这里插入图片描述
在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0，触发点击事件contact时候会重新赋值，跳转路由，一旦刷新页面，这个checkindex的值就是0，所以要把这个checkindex值记录下来，时刻监听到变化；利用到vue的父子和子父传值；监听状态的变化
1、子页面把状态把值传给

最低0.47元/天 解锁文章
倚楼听风雨的行者
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
10-16
今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目：页面刷新后，导航栏高亮位置不对问题
qq_33991007的博客
01-08 830
解决vue项目页面刷新后，导航栏高亮位置不对问题解决办法： 解决办法： 导航组件： 点击事件中将索引存入sessionStorage中即可解决问题，如下图所示： 登录组件： 最后在登陆界面中将sessionStorage中数据全部清除即可（防止重新登录索引不为初始值）！！！ ...
使用vue脚手架，点击导航切换不同路由且给导航切换样式，发现点击样式存在冲突（解决办法）
weixin_45294459的博客
10-18 478
项目场景： html: <ul class="tsmenu"> <router-link to="/"> <li :class="{yuanshi:yuanshi}" @click="dianji">商城</li> </router-link> <li :class="{yuanshi:yuanshi1}...
路由切换之后默认高亮/刷新页面后导航栏路由与页面不一致问题终极方案
m0_56986233的博客
03-10 927
路由切换默认高亮 请注意，一定要保证你:default-active 路由的值 和你路由path的值相同 下面我列出方法，利用sessionStorage来解决这个问题 这是一些相关的值 :default-active="activePath" activePath: "", 绑定点击对象 <el-menu-item v-for="item in list" :key="item.id" :index="item.path"
Vue 刷新页面导航显示高亮位置不对-----已解决
JS 实现全选和反选
12-24 1368
Vue 刷新页面导航菜单显示高亮位置不对
解决Vue 刷新页面导航显示高亮位置不对问题
10-15
总结来说，解决Vue刷新页面后导航高亮位置不对的问题，关键在于正确地管理状态和利用Vue的组件通信机制。通过在父组件中维护一个表示当前页面的变量，并通过事件将页面变化信息从子组件传递给父组件，再由父组件更新...
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
10-18
在Vue.js应用中，实现导航条高亮以及路由菜单高亮是常见的需求，这有助于提升用户体验，明确当前页面所在的位置。以下将详细解释如何利用Vue.js的特性来完成这一功能。 首先，我们需要创建一个数据对象，存储导航条...
vue+element导航栏高亮显示的解决方式
12-13
页面强制刷新，按F5时，页面如果没有好好设置的话，导航栏默认叠起来，而且无高亮显示；刷新后导航栏显示和之前不一致，如图所示 解决： html关键代码设置 :default-active=”defaultUrl” 这儿的原理就是...
页面刷新导航栏仍保持刷新之前的状态
weixin_45558019的博客
12-30 686
<%-- Created by IntelliJ IDEA. User: 张小白 Date: 2020/12/30 Time: 16:56 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <title>导航测试</title> <meta
vue2如果解决刷新页面菜单高亮位置不对问题
qq_50386946的博客
05-14 210
【代码】vue2如果解决刷新页面菜单高亮位置不对问题。
vue使用element-ui，页面刷新，导航栏选中问题
前端打工人的博客
03-24 1733
当你在使用纵向导航时，刷新了页面，左侧导航显示了默认的选项，导航发生了变化，而路由及页面并未改变，那怎么让它选中路由的页面呢 :default-active="activeIndex" data() { return { activeIndex: '1', }; }, 第一种方法： 把data中的activeIndex去除，改为计算属性，这一步解决纵向导航栏的问题 computed: { activeIndex() { const ar
vue 实现平滑滚动及导航栏固定偏移问题
weixin_45693257的博客
09-18 2655
一. 实现页面平滑滚动 html： <a class="nav-link active" @click="scrollHome">HOME</a> <home id="home"></home> method： scrollHome () { document.getElementById('home').scrollIntoView({ block: 'start', behavior: 'smooth' }) } 二 . 解决导航栏固定偏移问题 如果
vue路由设置高亮模式的时候默认路由一直是高亮,切换别的路由也还是高亮的解决办法
weixin_45810135的博客
09-28 1023
vue路由设置高亮模式的时候默认路由一直是高亮,切换别的路由也还是高亮的解决办法 在使用vue-router高亮 样式 .router-link-active 的过程中我发现,设置完这个属性有一个bug,那就是当我们切换路由的时候首页一直处于高亮状态,如下图: 悬系小说是我的默认子路由,所以会出现它一直高亮的状态. 解决办法 是给默认子路由添加 exact 属性就好了 如果对你有用,不要吝啬您的点赞哦!您的支持就是我前进的动力! ...
Vue 页面刷新时菜单栏的高亮问题，默认路由
PrimaryColor
07-15 1321
data() { return { selectTag: "", //选择菜单 } } 在文件中的监听器如下： watch: { "$route.path": { handler(val) { console.log("菜单：", val); this.selectTag = val; //val是路由跳转的path }, immediate: true //立即执行 } },
vue 翻页每次从1开始_关于vue+element-ui项目的分页，返回默认显示第一页的问题解决...
weixin_39617685的博客
12-20 849
问题描述当前页面如下：然后点击页码跳到第3页，然后在第三页点击页面链接跳转到新的页面然后在新页面点击返回按钮，返回到当前页，结果页面分页显示第一页，对应页面内容也是第一页期望效果从新页面返回的时候，页码和页面内容仍旧保持在跳转离开前的样子。解决办法1.利用localStorage或者sessionStorage将跳转页面前的currentPage存储起来，然后，再次返回当前页的时候，在create...
vue3 + ts + element-plus 菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项。
weixin_45288172的博客
04-25 1011
vue3 + ts + element-plus 菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项。
Vue页面跳转但是导航高亮不会改变
weixin_44689277的博客
03-14 2335
问题： 在页面上点击时，高亮会变但是在后天用代码的话就不会变。 this.$router.push({ name: "write" }); 用这段代码高亮不会改变。 原因： 因为没有改变导航栏的 default-active （当前激活菜单的 index）。因为你用代码进行了改变，但是没有改变default-active的值。所以高亮不会改变。 解决： 每次变换路径时，进行刷新default-active。用监听器监听。 定义一个数据 定义函数handleSelect .
vue实现tabs侧边导航栏点击内容跳转到对应位置，且内容滚动导航栏切换，封装直接用
m0_64207574的博客
06-07 3979
vue实现tabs侧边导航栏点击内容跳转到对应位置，且内容滚动导航栏切换，封装直接用
vue2 项目 引导介绍导航菜单
最新发布
07-27
对于Vue2项目的引导介绍导航菜单，你可以使用Vue Router来实现页面导航和路由功能。下面是一个简单的示例： 1. 首先，确保你已经安装了Vue Router。你可以使用npm或者yarn来安装它： ``` npm install vue-router `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值