element ui+vue 导航菜单开启router刷新不高亮问题解决

最新推荐文章于 2024-02-28 13:39:10 发布
最新推荐文章于 2024-02-28 13:39:10 发布
阅读量1.8k 收藏 5
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kbdmy/article/details/106901563
版权

刷新页面后选中导航高亮不显示
最大原因:所选中的路径与当前激活路径不一致 如图可以打印当前选中路径
在这里插入图片描述

解决办法：使用饿了么 default-active属性 把值换成 $route.path 如下图:
在这里插入图片描述
不了解的同学可以点饿了么中文官网链接自行查询

因为我接收的二级导航后台数据path中不带’/'所以我自己拼接一个 当然也要注意第一个红色区域绑定的index值为字符串形式切是唯一的值
在这里插入图片描述

本人小白 如有错误请指正 谢谢大家

执着菜鸟一颗心
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue切换菜单时不需要页面刷新_vue element-ui 刷新页面后导航菜单不高亮问题
weixin_39783915的博客
12-19 1229
问题详情：在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。尝试解决：初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 i...
石头的实习之路2——Vue+element ui 切换导航栏菜单不高亮问题
qq_44462050的博客
04-14 2386
使用element ui的横向导航栏组件，点击菜单跳转，路由跳转过来了，但是跳转的菜单没有高亮效果。 跳转产品中心后，可以看到路由变了，但是没有高亮显示 这里采用的跳转方法是在js的methods中写一个方法，通过@click触发方法跳转 methods: { skip_product() { this.$router.push({ path: '/xxxx/product_center' }) } 多方寻找解决办法无果，看到了一位大佬的博客，按照他的方法设置，解
网站页面刷新后,导航菜单高亮显示的位置不对问题
最新发布
wasd2399的博客
02-28 369
解决公共页面路由跳转刷新高亮丢失问题
vue-router二级导航切换路由及高亮显示的实现方法
12-09
这里以网易云音乐作为示例，效果图： 我们先一层一层写导航 先设计第一层 1.设计导航页面样式 第一个导航页面为Discover Discover.vue： <!-- --> <template> <div> 发现 </div> </template> [removed] export default { name: "discover", data() { return { }; } }; [removed] <style scoped> </style> 第二个导航页面为Mymusic 其余代码一样，注意要把name改为相应路由 name: "mymusic" 2
解决刷新菜单高亮问题
Anniee97的博客
06-07 251
菜单刷新 高亮问题
解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失
qq_65388624的博客
08-23 2070
解决Vue导航栏路由跳转，刷新后导航块高亮消失
Element+vueRouter路由实现多级页面跳转，为什么当前页对应的导航栏不高亮？
SunFlower914的博客
11-06 1239
解决在页面内点击展示的是B页面，刷新后菜单项A依然是激活状态的问题，给对应的导航栏添加default-active属性，然后使用push来控制路由跳转，跳转时使用$router.path来实现更改默认路由当前激活菜单的 index
vue2 中二级路由高亮问题及配置方法
12-02
1、项目中的图标使用的是element-ui框架中的图标，如果需要引入可以看我写的上一篇文章。 2、首先配置路由 我初始化项目的时候初始化了路由，所以打开router/index.js文件进行修改配置 router/index.js import Vue...
blog-vue-typescript：vue +打字稿+ element-ui支持markdown渲染的博客前台展示
02-03
简介此项目是基于Vue全家桶+ TypeScript + Element-UI技术栈的简洁时尚博客网站。项目详情请猛戳该文章： TypeScript具有类型系统，且是JavaScript的超集，TypeScript在2018年势头迅猛，可谓遍地开花。 Vue3.0将使用...
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
除了基础的实现方式，有时我们可能需要集成第三方UI库，如Element UI，来创建更复杂的导航菜单。Element UI提供了一套完整的导航组件，包括`el-menu`和`el-submenu`等。例如： ```html :default-active="$route...
vue项目实现设置根据路由高亮对应的菜单项操作
10-14
在Vue项目中，实现根据路由高亮对应的菜单项是一项基本但重要的功能，它能够帮助用户更好地理解当前所处的页面位置。下面将详细介绍两种常见的实现方法。 首先，我们可以使用Vue Router提供的`router-link`组件来...
在Vue中实现随hash改变响应菜单高亮
10-15
总结来说，实现在Vue中随hash改变响应菜单高亮，我们需要结合Vue Router的生命周期钩子或监听`$route`对象，以及Element UI的菜单组件特性。同时，理解Vue组件的复用机制和动态组件的概念也是关键。通过这些方法，...
vue element-ui 侧边栏刷新高亮丢失问题解决
YBQyyds的博客
01-04 843
改造之后，侧边栏刷新高亮不丢失，如果还用router-link，利用element-ui的默认路由，筛选的话，比较麻烦，偶然间发现了router模式，只需要给el-menu开启router模式，把router-link标签上的path赋值给el-menu-item的index，然后把router-link标签清除即可实现刷新不丢失高亮的问题，代码如下。改造之前，侧边栏刷新高亮丢失，用的是rooter-link包裹，代码如下。
element-ui导航菜单使用vue-router刷新后高亮显示不一致完美解决办法
weixin_42661283的博客
05-15 6159
问题1：刷新后，默认高亮显示为当前的第一个索引值 产生原因： :default-active="activeIndex" 解决办法：将:default-active="activeIndex" 替换成 :default-active="$route.path" 问题2：改完:default-active="$route.path"后发现高亮不显示，需要双击对...
element UI中使用导航栏配置router后无法高亮
l1002670137的博客
09-19 566
解决组件库侧栏配置router后点击没有高亮显示的问题
elementui侧边栏菜单刷新后不被选中、不高亮的问题
buukyjmvni的博客
08-04 1188
在sidebar.vue文件里， 一、elmenu组件中设置default-active： <el-menu :show-timeout="200" :default-active="activerouter" //重点 :collapse="isCollapse" :default-openeds="openeds" background-color="#FFFFFF" text-color="#000000" ac
vue：路由菜单刷新高亮
1363648943的专栏
12-17 1437
很多人遇到了路由高亮的问题。问为什么页面一刷新进来当前页就不不高。刷新的时候也没有记录状态。其实就是路由没有记录。。。 我们想要实现的效果是： 1､这里用的是 Element UI 。先把菜单封装。请看上面的文章：https://blog.csdn.net/u013592575/article/details/103493865 2､element UI 中 NavMenu 有一个 d...
解决点击按钮实现路由跳转后Element导航控件没有同步高亮的问题
louxinuo的博客
12-14 1228
不点击Element导航栏，而是通过点击组件内的某些按钮，实现页面的跳转。 路由跳转很简单，但我们的需求是如何实现导航控件的同步高亮！
vue-router meta（2）页面进入详情页面时，无子项导航栏时，该菜单未高亮。
sepgit的博客
12-10 664
原因 管理系统，左侧导航栏有个单级的菜单（无子一级的菜单），进入后页面显示的是具体的房间列表。点击具体的房间可以进入房间详情页面，展示具体的房间数据。这时页面路由发生变化。发现，导航栏中不存在高亮的选项。 进入导航栏页面 <el-menu ....//其他配置项 :default-active="$route.path" .... </el-menu> 上述列表项 <el-menu-item index="/roomIndex"> <span slo
前端vue毕设项目【易购商城】vue + vuex + vue-router + element ui + axios + vu
08-25
在该项目中，我使用了Vue、Vuex、Vue Router、Element UI、Axios等技术和库来实现各种功能。 首先，Vue是一种流行的前端框架，它具有响应式的数据绑定和组件化的特性，使得开发者可以轻松构建交互性强、高效的单...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值