vue菜单栏刷新仍高亮

最新推荐文章于 2025-03-11 11:49:30 发布
最新推荐文章于 2025-03-11 11:49:30 发布
阅读量313 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lixiaoyan_star/article/details/108082465

简单粗暴，直接上代码~

:default-active="$route.path"
router

el-submenu 里的index    :index=" '/'+item.url"
不要忘记'/'

亲测有效！！！

Vue：如何保持导航栏的高亮状态
weixin_45745641的博客
07-27 2306
我们在利用Vue写后台管理系统时，对于导航栏我们需要保持其处于选择的高亮状态，大概要经过如下三个步骤： 为所需要的点击的二级菜单栏设置点击事件，把对应的index值保存在sessionStorage中 当页面刚被刷新创建时，将sessionStorage中的值取出来赋值给菜单栏进行激活 点击每一个二级菜单栏时，要给activePath重新赋值 下面来看一下具体的实现过程： 1.为二级菜单栏绑定点击事件saveNavState 2.把对应的index值保存在sessionStorage中 saveNav
vue项目解决刷新后，导航菜单高亮显示的位置不对
qq_42972187的博客
06-15 5435
1本人在学vue项目时遇到一个坑、在写vue项目头部导航时，比如点击第三个，刷新后，高亮状态显示在第一个： 现在是点击第三个页面 刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态； 捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分； 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0，触发点击事件contact时候会...
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
10-16
今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue组件库el-menu导航菜单刷新时菜单激活高亮和路由地址保持一致
最新发布
u010899032的博客
03-11 235
注意:this.$route.path不是this.$router.path。
vue3 + ts + element-plus 菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项。
weixin_45288172的博客
04-25 1364
vue3 + ts + element-plus 菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项。
vue 菜单高亮，多级菜单保持高亮
qq_61869009的博客
12-19 1067
监听路由变化判断要跳转的路由中是否存在childrenUrl，存在则表示他是多级路由拿到他的childrenUrl给vuex中的defaultActive。修改vuex中的值并使用sessionStorage做到持久化储存避免页面刷新菜单高亮失效。这个defaultActive放到vuex中方便后续操作。1.在创建路由的时候给子路由多增加一个参数用来判断。主要实现多级路由跳转后还想保持左侧菜单高亮。
解决Vue 刷新页面导航显示高亮位置不对问题
10-15
然而，在刷新页面时，有时导航菜单的高亮位置可能会出错，不再对应于实际的当前页面。这个问题通常与Vue组件之间的数据传递和状态管理有关。以下是一种解决Vue刷新页面后导航高亮显示错误的方法： 首先，我们需要...
vue+element导航栏高亮显示的解决方式
10-16
在构建基于Vue.js的Web应用时，经常需要使用Element UI框架提供的导航栏组件来创建页面顶部的菜单导航。在使用Element UI的组件时，常常会遇到导航项在页面跳转或刷新后无法正确显示高亮状态的问题。本文将详细介绍...
Vue页面手动刷新,实现导航栏激活项还原到初始状态
10-14
在实际应用中，当用户通过导航在不同页面间切换时，通常希望保持导航栏的状态，如高亮显示当前选中的菜单项。然而，当页面被手动刷新时，由于Vue实例会被重新创建，这些状态可能丢失。为了解决这个问题，我们可以...
vue项目实现设置根据路由高亮对应的菜单项操作
10-14
主要介绍了vue项目实现设置根据路由高亮对应的菜单项操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue点击当前路由高亮小案例
10-16
主要为大家详细介绍了vue点击当前路由高亮小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决Vue3 使用Element-Plus导航刷新active高亮消失
键指江湖的博客
08-03 1931
解决vue3使用element plus导航菜单刷新页面后active高亮消失的问题
vue中NavMenu导航菜单刷新高亮，上一级常亮实现
coinisi_li的博客
01-09 1682
而一级菜单栏由activeMenu来自定义高亮，使得activeMenu配置和一级菜单的index属性中的配置一直一致，这样接口文档内的纵向菜单在切换的时候就不会影响到一级主菜单的高亮了。通过路由router设置路由元信息（meta）记录地址，在MenuNav中读取meta中设置的信息，匹配el-menu-item中index的值，来解决刷新或地址改变造成的一些导航栏高亮问题。在当前页面中还嵌入一个纵向菜单，这个纵向菜单高亮代表这个页面显示不同的tab（刷新页面后依旧保持高亮）在菜单中，存在多级带单。
Vue 页面刷新时菜单栏的高亮问题，默认路由
PrimaryColor
07-15 1410
data() { return { selectTag: "", //选择菜单 } } 在文件中的监听器如下： watch: { "$route.path": { handler(val) { console.log("菜单：", val); this.selectTag = val; //val是路由跳转的path }, immediate: true //立即执行 } },
vue：路由菜单刷新高亮
1363648943的专栏
12-17 1510
很多人遇到了路由高亮的问题。问为什么页面一刷新进来当前页就不不高。刷新的时候也没有记录状态。其实就是路由没有记录。。。 我们想要实现的效果是： 1､这里用的是 Element UI 。先把菜单封装。请看上面的文章：https://blog.youkuaiyun.com/u013592575/article/details/103493865 2､element UI 中 NavMenu 有一个 d...
vue关于点击菜单高亮与组件切换
b453293486的博客
03-21 2751
有两种 一种是 使用router-link 这种直接可以用router-link-active 来写高亮样式 组件在路由跳转后 高亮依旧存在 一种是：is的应用了 点击触发事件 事件改变currentView的值 可以直接改掉 ：is 这个引入文件入口 <template> <div class="index"> <div c...
vue刷新页面侧边栏，保持原来位置高亮
qq_43586648的博客
07-23 1530
to.fullpath 为当前进入页面的path，因为刷新后，同样也能进入路由守卫，我们在这里保存他 然后回到侧边栏组件： 有问题随时与我联系哦
vuejs切换导航条高亮路由高亮做法
weixin_34309543的博客
05-29 3182
我的GitHub前端经验总结，喜欢的话请点star✨✨Thanks.:https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法： 用一个数组存导航条，用v-for循环它，这样可以减少代码，二可以使用它的下标来判断高亮，三还可以获取后端的导航信息来遍历 重点是在：rou...
elementui菜单栏菜单栏保持高亮
01-12
### 实现ElementUI菜单栏中选中的菜单项持续高亮 为了确保ElementUI菜单栏中选中的菜单项能够持续高亮显示，在不同场景下的解决方案如下： #### 横向菜单 对于横向菜单，当只有一个菜单时，点击该菜单会使其高亮。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值