element-ui菜单栏切换页面高亮刷新后不显示问题

最新推荐文章于 2023-01-04 09:35:01 发布
最新推荐文章于 2023-01-04 09:35:01 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 服务器 文章标签： web服务器 vue部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35121480/article/details/105573194
版权

最近做的一个vue的小项目，在点击菜单栏其他页面之后高亮会跟着过去，但是刷新后高亮又会重新跳到最初进入的页面，原因是这样的，element-ui官网示例:default-active="activeIndex"，这个控制高亮，然后在data中一直返回了activeIndex: '1',这样的话就是刷新页面就一直变为1的那个高亮。

解决办法：

但是这样改的话要注意每个页面的index等于的跳转要改为自己url上面的名字，这样就ok了

竟然有人也叫Webwei
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue切换菜单时不需要页面刷新_vue element-ui 刷新页面后导航菜单不高亮问题
weixin_39783915的博客
12-19 1224
问题详情：在使用element-ui的NavMenu组件作为导航菜单的时候，我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。尝试解决：初步Google搜索之后发现原来NavMenu组件有这么一个参数配置用来管理当前激活的菜单：default-active 说明：当前激活菜单的 i...
解决Element-UI 侧边栏页面刷新后不高亮显示的问题
尘生杜若
05-08 4320
最近在写一个后台管理系统，用的vue+element，搞到侧边栏导航的时候路由跳转没有问题，但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，因为项目时间比较紧，并且没有影响到我后面的开发所以就搁置了一段时间，今天有时间搞了一下，发现想的时候可能有些复杂，其实这个问题还是比较简单的。 例如：下面这段代码 <template> <el-aside width="240px"...
解决element-ui侧边导航在页面刷新后失去高亮的问题
littlebearGreat——宁静致远
07-06 8686
element-ui  +  vue.js项目中，页面刷新后侧边导航失去高亮。在此，解决此问题1. element-ui  提供一个属性 :default-active='activeNav' 来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题2.在页面刷新的时候，获取地址栏中的地址，再写一个地址与做导航的配置文件，得出default-active  的值即可。下面是我写的配置文件/...
elementui侧边栏菜单刷新后不被选中、不高亮的问题
buukyjmvni的博客
08-04 1177
在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 element-ui 侧边栏刷新高亮丢失问题解决
YBQyyds的博客
01-04 833
改造之后，侧边栏刷新高亮不丢失，如果还用router-link，利用element-ui的默认路由，筛选的话，比较麻烦，偶然间发现了router模式，只需要给el-menu开启router模式，把router-link标签上的path赋值给el-menu-item的index，然后把router-link标签清除即可实现刷新不丢失高亮的问题，代码如下。改造之前，侧边栏刷新高亮丢失，用的是rooter-link包裹，代码如下。
element-ui 设置菜单栏展开的方法
01-21
element-ui 侧边栏默认要全部展开怎么做？ element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el></el>标签加上这个属性 <el class=el-menu-vertical open=handleOpen close=handleClose...
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI升级后，el-table不显示 空白问题 备份包
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
主要介绍了详解element-ui级联菜单（城市三级联动菜单）和回显问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
ElementUI的使用-导航栏中刷新界面后没有显示刷新前的菜单
AgainNotA
09-26 522
ElementUI的使用-导航栏中刷新界面后没有显示刷新前的菜单 初始代码： <el-menu default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"> <el-menu-item index="/create"> <i class="el-icon-edit-outline"></i> <span slot="
Vue+Element-UI下刷新后高亮消失的解决办法
丁哒哒的博客
09-25 3939
问题描述 最近在做项目的时候遇到，页面刷新后路由不变、页面也不变，只是导航栏高亮消失的问题，查阅相关文档后，下面是我找到的解决办法之一。 代码 HTML部分： <el-menu :default-active="$route.path" background-color="#25569f" text-color="#fff" ...
element-ui导航菜单使用vue-router刷新后高亮显示不一致完美解决办法
weixin_42661283的博客
05-15 6146
问题1：刷新后，默认高亮显示为当前的第一个索引值 产生原因： :default-active="activeIndex" 解决办法：将:default-active="activeIndex" 替换成 :default-active="$route.path" 问题2：改完:default-active="$route.path"后发现高亮不显示，需要双击对...
Element-UI 侧边栏高亮
qq_44706779的博客
02-18 1674
Element-UI 侧边栏高亮一、出现场景二、解决办法1. F5 刷新高亮问题2. 前进后退后高亮不同步问题 一、出现场景 在使用 Element-UI 的侧边导航栏时我遇到了两个问题： 按 F5 刷新页面后，导航栏默认折叠起来，并且无高亮显示 点击浏览器的前进后退按钮后，高亮显示与页面内容不同步 下面我就这两个问题给出自己的解决办法。 二、解决办法 1. F5 刷新高亮问题 原理：当地址栏发生变化时，修改改变默认显示高亮的值。 首先给导航栏加上 default-active 属性，记得加上冒号。
vue跳转页面显示不出来 引入elementui后页面显示空白
Faker_whoop的博客
02-21 1254
vue跳转页面显示不出来 引入elementui后页面显示空白
element menu高亮问题
久遇不厌的博客
12-15 2461
在刷新页面的时候会出现menu组件没有高亮当前菜单的情况，解决方法如下： // 在el-menu加上default-active属性，这个属性是当前激活菜单的index，对应着菜单中的index属性 <el-menu :router='true' :default-active='activeIndex' active-text-color='#409EFF' :collapse="isCollapse"> <el-menu-item index="导航二"> <i
el-menu 刷新页面高亮,默认展开
qq_42341025的博客
03-30 2210
因为找了很多博客, 都和我自己的有些不一样. 所以总结一下, 记录一下 要有这三个 都存在; :default-active="$route.name" router :index="item.url" 这里的index 绑定的就是 跳转的 url, 我这里使用的 name 跳转的,这里的 item.url 就是 路由的name ...
element-plus中导航高亮不自动刷新问题
专研前端，探索后端
05-20 708
解决使用element-plus el-submenu时页面被this.$router.push(“xxx”)跳转后，导航菜单高亮不能自动刷新问题，需要注意以下几点： 在el-menu加上router index必须绑定路由的path,参考上面的例子，'/'不能少 default-active设为当前路由（this.$route.path）,这样在路由变化的时候，对应的menu-item才会高亮，如： 提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除
vue 中使用element-ui的menu选中高亮的问题
study_way的博客
04-17 1356
自己在做一个小项目的时候遇到的问题，看了很多博主发的解决方法，然后记录一下最终解决了我问题的这篇。 内容都是引用的其他博主的原文 在使用element中的menu组件时，根据官方文档，可以设置给el-menu设置router属性为：true，给el-menu-item设置index的值为路径，就可以实现点击导航跳转到指定路由。 这样做虽然能实现跳转，但是，若刷新浏览器，则导航会跳转到默认的选中项，而不是我们离开时的导航。 百度时大部分回答是将default-active属性设置为：$route.path，
石头的实习之路2——Vue+element ui 切换导航栏菜单不高亮问题
qq_44462050的博客
04-14 2383
使用element ui的横向导航栏组件，点击菜单跳转，路由跳转过来了，但是跳转的菜单没有高亮效果。 跳转产品中心后，可以看到路由变了，但是没有高亮显示 这里采用的跳转方法是在js的methods中写一个方法，通过@click触发方法跳转 methods: { skip_product() { this.$router.push({ path: '/xxxx/product_center' }) } 多方寻找解决办法无果，看到了一位大佬的博客，按照他的方法设置，解
element-ui菜单栏刷新页面
最新发布
10-15
要在element-ui菜单栏中实现刷新页面，可以在菜单项的click事件中调用location.reload()方法来实现。具体代码如下： ``` <el-menu-item index="1" @click="handleRefresh"> 刷新页面 </el-menu-item> ... ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值