解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法...

最新推荐文章于 2023-08-03 17:46:36 发布
转载 最新推荐文章于 2023-08-03 17:46:36 发布 · 390 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/daipianpian/p/9231848.html
文章标签：

#javascript #ui #ViewUI

本文介绍如何在Element UI中通过绑定$router.path来动态设置菜单的默认激活项，实现每次渲染菜单时都能根据当前路径自动激活对应的菜单项。

解决办法是给menu的default-active绑定route.path
形如：
<el-menu :default-active="$route.path" ...>
每次渲染menu都会读当前path 设置为default-active

转载于:https://www.cnblogs.com/daipianpian/p/9231848.html

dengzhuang8619
关注
vue3+element-plus：解决侧边导航在页面刷新后失去高亮的问题，导航菜单使用vue-router刷新后高亮显示不一致完美解决办法（导航menu高亮变色问题，无需大改动即可解决，详细实例代码
高级前端工程师
08-17 4468
vue3 element中导航menu高亮变色问题，Element-Plus导航栏刷新高亮消失，页面刷新后侧边导航失去高亮，导航栏根据路由改变状态，Vue3中使用el-menu高亮显示问题，菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项，element-plus menu 设置default-active 页面刷新时 导航高亮 踩坑，解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失，解决Vue3 使用Element-Plus导航刷新active高亮消失，el-menu添加router属性文字颜色选中激
vue3 使用element-ui的el-menu刷新之后保持选中状态
最新发布
jieweiwujie的博客
02-26 1559
3、点击链接是可以完美做到刷新后会保持选中状态，但是当我们手动输入路由的时候，页面会跳转但是css样式不会改变。当输入的路由和当前的路由不一样的时候。把当前的路由赋值给activeIndex。mounted函数中把这个当前路径赋值给 activeIndex 即赋值给了 default-active 参数。第一次访问的时候sessionStorage是空的，所以要加入默认的路径。官网示例给出的是2个参数key和keyPath，分别打印出来后是一样的都是当前的路径。
elementUI导航菜单中切换菜单项后页面跳转了但是选中菜单项不变或者与点击项不一致问题
jiangjunyuan168的博客
10-25 5993
菜单项是否选中就是看 default-active 绑定的值是哪个菜单项的 index 值，所以我们在路由跳转后将 default-active 绑定的值切换为当前菜单项的 index 值即可。将 index 值设置为菜单项的路由路径，点击后直接进行路由跳转，然后将 default-active 绑定为路由跳转完后的当前路由路径。比如下方中从博客切换到标签，正常情况下选中的菜单项应该是标签（标签高亮），但是现在选中的菜单项依旧是博客或者其他菜单项。
Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新
怡暘
08-03 3320
背景：在对项目进行bug走查的时候，测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新，当时我真的懵了，vue项目了router还能在当前页面进行再次刷新！！！我怀着疑惑上网查询、咨询足足使用了我3h，多宝贵的时间呀，就这么浪费掉了。最后，好歹，功夫不负有心人，还真有大佬讲到该部分的内容，通过自己尝试最终将问题解决。下面将我的问题解决方法分享给大家。 参考：https://blog.csdn.net/tq1711/article/details/108386307?utm_medium=distrib
刷新当前页面不跳路由
weixin_45168482的博客
12-17 487
利用 provide 和 inject 实现页面刷新 首先在 App.vue 的 添加 v-if 属性 <router-view v-if="isRouterAlive" ></router-view> 其次在 data 里面添加 isRouetrAlive，这个属性名可以自定义，默认设置为 true，如果为 false 整个页面就不会显示了 然后在 methods 里面添加一个刷新方法 最后需要把这个函数 provide 出去 export default { name
vue element NavMenu :default-active根据路由进行自动配置（包括点击页面中的链接，即将前往的页面不在导航中，想要保持最外层级别的导航保持高亮）
扬帆前行
11-28 3884
导航当中设置:default-active值之后点击页面中的跳转链接（即将前往的页面不在导航中），此时的导航高亮就会消失， 目标： 点击父页面中的查看按钮，进入到详情页面，父页面导航仍然保持高亮。 刷新浏览器导航，当前页面对应的导航仍然保持高亮。 未退出系统，直接关闭浏览器的情况下，浏览器直接输入地址进入系统的，打开什么页面相对应导航高亮 呈上代码： 在index.js中添加下面代码：（路由权...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
综上所述，要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据...
关于element中el-menu刷新之后，default-active的值
Lemontree_fu的博客
10-17 8566
大家都知道element中有个导航菜单，它有个属性default-active，用来设置默认激活的index。这个值原来我一直写的都是死的，后来发现当刷新页面之后，就会出现问题，所以这里给它变成活的。下面是我用的办法。 第一，先给el-menu设置一个属性 :default-active="activeIndex" 第二，在数据里写上这个值 data(){ activeInde...
vue使用element-ui，页面刷新，导航栏跳转问题（解决）
ygx_work的博客
04-29 3813
产生的原因 原因是在使用组件时，设置了默认选中，因此页面刷新，导航发生了变化，而路由及页面并未改变 :default-active="activeIndex" data() { return { activeIndex: '1', }; }, 解决办法 第一步，同样还是要使用默认选中 :default-active="leftNavActive"...
解决vue3 el-menu 刷新页面菜单选中项和路由不匹配
hzxOnlineOk的博客
10-15 2885
网上找到的方法有2种： 1、给el-menu组件增加属性 :default-active="this.$route.path" 但是博主试了下，打印出来的路由this.$route.path一直是/，放弃 2、通过this.$router.currentRoute console.log('当前路由', this.$router.currentRoute); 所以我们可以通过this.$router.currentRoute._value.fullPath访问到当前激活的url，然后将.
el-menu实现路由跳转及当前页的导航
weixin_55560445的博客
01-06 3487
1、el-menu-item 路由跳转 要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下index即可实现点击el-menu-item实现路由跳转。 <el-menu :router="true> <el-menu-item index="/home">...
elementUI中导航栏选中状态不准确
ju__ju的博客
08-27 488
问题描述,当我点击首页和关于我们时,这个蓝色下划线的选中状态是正确显示,但是当我通过点击logo跳转时,地址发生改变了,但是选中状态还是在关于我们那,当时是直接使用的elementui中的实例 通过修改 将当前路由作为选中状态的判定就可以了 ...
路由切换之后默认高亮/刷新页面后导航栏路由与页面不一致问题终极方案
m0_56986233的博客
03-10 1052
路由切换默认高亮 请注意，一定要保证你:default-active 路由的值 和你路由path的值相同 下面我列出方法，利用sessionStorage来解决这个问题 这是一些相关的值 :default-active="activePath" activePath: "", 绑定点击对象 <el-menu-item v-for="item in list" :key="item.id" :index="item.path"
vue el-menu 跳转本页刷新 解决方案
xuelang532777032的博客
10-12 3259
应用场景描述 我的 群153181864 前端交流群，绝对原创，转载请附上 本微博链接。 element 点击左侧菜单 同一个路由，但是要刷新本页面 默认是不刷新的 解决方案 el-menu先加入@select="menuSelect" @select="menuSelect" router-view加入:key="dateKey" :key="dateKey"...
ElementUI导航菜单使用(并解决刷新会调回首页)
眾K的博客
11-25 3754
新桥 <el-menu :default-active="$route.path" //刷新绑定当前页面路径不会跳转 router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 @select="handleSelect" //菜单激活回调 unique-opened //是否只保持一个子菜...
使用element-ui的el-menu刷新保持选中状态
五颜六色的白
10-21 1808
使用element-ui的el-menu刷新保持选中状态
element-ui导航菜单跳转页面后，菜单选中项不对
qianduanVIP666的博客
08-03 1271
2.el-menu-item 标签 index绑定值=菜单跳转路由（index="/user"）1. el-menu 标签添加属性 :default-active="$route.path"1. 菜单跳转后，页面菜单的选中项与实际不符。2. 当前页面刷新后，菜单选中项与实际不符。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值