el-menu的属性:default-active

最新推荐文章于 2024-04-30 11:06:01 发布
最新推荐文章于 2024-04-30 11:06:01 发布
阅读量4.2k 收藏 11
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47630333/article/details/118515262
版权

在这里插入图片描述
说明内容是：当前激活菜单的index
其实，即使不加这个属性，也能正常显示选中的item变量，但是之所以要加这个属性，是为了浏览器刷新后，仍然可以定位到之前选中的路由
如果没有多层嵌套路由的话，可以令:default-active="$route.path"，但是如果有多层嵌套，建议在计算属性里，更新数据
在这里插入图片描述

m0_47630333
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
221224-003shopvue(el-menu刷新保持当前菜单选项与角色页面)
12-24
1重构：src\components\... <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" text-color="#fff" :default-active="activeIndex" router> <template v
vue使用ElementUI时导航栏默认展开功能的实现
08-27
例如：<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-openeds="['1']"> 3. 使用 Vue 实例实现默认展开 可以使用 Vue 实例来实现默认展开。例如：...
【Vue3+Pinia+Element Plus】el-menu :default-active 当前菜单项保持激活
Louis 的博客
11-21 1088
在进行刷新页面或 router.push() 等操作后，el-menu 菜单项的 active 状态会丢失，使用以下代码可解决此问题
el-menu中的defaule-active的作用是设置当前活动的菜单
weixin_50072831的博客
07-22 1916
el-menu中的defaule-active
el-menu导航菜单根据路由变化选中对应项
最新发布
WDY66886688的博客
04-30 198
2、:default-active为 $route.name、 $route.path、 activeIndex(待完善取值)，el-menu-item的index属性设置为当前路由名称、地址、索引值，请一一对应。">处理中心</el-menu-item>1、设置router为true。
el-menu 切换菜单激活状态default-active
qq_51553392的博客
03-23 2445
el-menu 切换菜单激活状态
default-active的使用
weixin_51300999的博客
03-21 1万+
default-active需要传进去的值就是子导航的index值（也就是其路由值），达到点击路由就可以引起高亮。 1.首先是在index处动态接收api里面的路由名称 2.然后点击事件时用函数获取路由名称 <!-- 二级菜单 --> <el-menu-item :index="'/' + items.path" //首先是在index处动态接收api里面的路由名称 v-for=...
el-menu设置侧边栏使选项默认高亮与当前网址一致
LK_315的博客
07-14 1782
使用el-menu实现侧边栏激活选项与当前页面网址一致的功能
el-menu页面内控制激活的菜单$router.path :default-active
热门推荐
qlin_11的博客
08-09 2万+
需求是在页面内点击跳转，但是菜单项依然是激活状态，我这里实现的方法是做了子路由，然后使用push来控制路由跳转，跳转时使用$router.path来实现更改默认路由，注意子路由需要使用split来分割出第一个/后的一级路由，使用这个取出来的来赋给：default-active,这里因为是通过请求从后台获取的菜单路由，赋给index来实现动态加载不同的菜单项，所以会有el-menu的index可能...
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
在 el-menu 标签中绑定 `:default-active="$route.path"`，注意是绑定属性，不要忘了加“：”，当 `$route.path` 等于 el-menu-item 标签中的 index 属性值时，则该 item 为当前项。 总结 以上所述是小编给大家...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
综上所述，要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据...
element-ui menu设置:default-active 不生效处理
LiChengzhong的博客
03-21 1891
element-ui menu设置:default-active 不生效处理
elementui使用:default-active=“onRoutes“不起作用的原因
m0_64457414的博客
04-07 662
如下是错误的写法，原因为我的$route.path返回的路径是replace之后的为adhomeadIndex，而我的index写adIndex，两个路径不一样，所以浏览器解析时无法根据相同的路径去显示高亮。解决办法就是让onRoutes返回的数据和index显示的数据一样就可以。
sidebar（侧边栏原理vue admin）
qq_52151772的博客
01-24 8957
sidebar 侧边栏原理
element-ui中导航菜单默认激活子菜单的第一项
认定的总要想办法去完成。
12-13 1万+
默认激活子菜单的第一项  代码部分: <!-- 设置默认选中的选项为1-0 --> <el-menu class="el-menu-vertical-demo" background-color="#eef1f7" text-color="#6c6f72" active-text-color="#ffd04b" unique-opened default-activ
2022-10-24
weixin_70644259的博客
10-24 145
笔记
修改el-submenu子组件el-menu-item宽度
qq_42022928的博客
09-03 1万+
el-submenu默认样式 修改后样式 修改方法 在css中添加如下代码： .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{ min-width: 120px!important; }
elementui 选中子页面时，保持左侧导航中父级的激活状态 :default-active=“activeMenu“
NOyesNONO_的博客
07-05 1939
去配置子路由的页面，给meta加上这个属性即可
Element-ui中的导航菜单el-menu自动激活当前路由对应的菜单项
raphero
05-16 1万+
Element-ui中的导航菜单el-menu自动激活当前路由对应的菜单项 el-men有一个坑，就是当前激活的菜单项，刷新页面后，激活项就会消失。 研究半天终于找到解决办法： 原来default-active的值不一定是数字，也可以是路由path、name，只要是字符串能对应上就能正确激活，所以这里做以下改动： 目前网上搜索到的很多都是router.path，目前新版vue−router应该是已经改成了router.path，目前新版vue-router应该是已经改成了router.path，目前新
<el-menu active-text-color="#01B9D1" background-color="#393D49" class="el-menu-vertical-demo" :default-active="$route.path" text-color="#fff" router style="height:100%;width:100%;" mode="vertical" > <el-menu-item index="/home/toSetScene"> <template #title> <el-icon><House /></el-icon> <span>场景管理</span> </template> </el-menu-item> </el-menu> 中el-menu增加:collapse="isCollapse"样式变形
06-01
如果您想让el-menu在一定条件下收缩，您可以将isCollapse设置为true，然后在el-menu中增加:collapse="isCollapse"属性，就可以实现收缩的效果。代码如下： <el-menu active-text-color="#01B9D1" background-color="#393D49" class="el-menu-vertical-demo" :default-active="$route.path" text-color="#fff" router style="height:100%;width:100%;" mode="vertical" :collapse="isCollapse" > <el-menu-item index="/home/toSetScene"> <template #title> <el-icon><House /></el-icon> <span>场景管理</span> </template> </el-menu-item> </el-menu> 请注意，这只是一个简单的示例，如果您想实现更复杂的收缩效果，您需要编写更多的代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值