el-menu-item动态路径解决方案

最新推荐文章于 2025-09-11 04:48:49 发布
原创 最新推荐文章于 2025-09-11 04:48:49 发布 · 957 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue.js

本文介绍了一种在el-plus中批量配置el-menu-item的方法，特别是如何处理带有动态参数的路由路径，通过使用computed属性实现菜单项的动态生成与管理。

场景：要配置批量el-menu-item，其中路径带动态参数：/app/:id/path

el-plus API

 解决方案：

1. computed + index

1. computed + route + click

Tips：computed 是关键

《前端》el-menu导航栏实现方法--2021年1月3日
BelleDiao的博客
01-03 822
项目场景和问题描述： 之前做的全供应链看板，不同页面是用页签实现的。现在领导要求用导航栏的方式展现。我当时觉得手册有案例应该很简单，但是，把自己????了，做导航栏很简单，但不同页面怎么跳转呢？网上查别人博文都是用router，但是我怎么都不成功。 原因分析： 后来可利说，我这是在html文件中，不能使用vue-router。等今年我要学会webpack打包项目的那种方式。现在先使用html能支持的方式来实现。 两种解决方案： 我能实现到的地方-实现不了点击导航栏在右侧出页面内容 <body>
element el-menu动态菜单
逆风优雅的博客
11-15 2474
【代码】element el-menu动态菜单。
ElementUI使用问题记录：设置路由+iconfont图标+自定义表单验证
weixin_52104995的博客
04-08 1127
验证手机号（我是独立写了一个validator.js文件的，放在util目录下，然后把所有验证规则都写在这里，使用的时候导入即可）/*** 校验规则文件* 触发方式：type=['blur','change']*///定义phone验证全局变量if (!value){callback(new Error('请输入电话号码'))}else if (!callback(new Error('请输入正确的11位手机号码'))}else {callback()required:{
Element Plus中el-menu-item路由跳转失效问题解析
gitblog_00043的博客
09-11 422
在使用Element Plus的菜单组件时，开发者发现通过el-menu-item的route属性配置路由跳转时，点击菜单项无法正常跳转到目标页面。这是一个在Element Plus 2.8.8版本中出现的典型配置问题。 ## 问题根源分析 经过技术分析，这个问题并非组件本身的bug，而是由于开发者在使用el-menu-item组件时遗漏了一个关键属性配置。Element Plus的菜单组件在...
vue3.0项目实战系列文章 - 菜单的实现及icon组件封装
BMG-Princess
08-15 3250
vue3.0项目实战系列文章 - 菜单的实现及组件封装 图标是动态变化的，需要二次封装组件实现 写法与vue2有所区别
el-menu中el-menu-item的样式根据路由动态激活
qq_36694183的博客
06-27 1814
index=‘/role’,index的内容必须是跟路由的path一样加上/ :router=‘true’并且:default-active=’$router.currentRoute.path’
Vue el-menu-item路由跳转
m0_57855884的博客
09-22 1859
Vue el-menu-item路由跳转
【记录41】el-menu 动态菜单
~牧马~
04-06 732
【代码】【记录41】el-menu 动态菜单。
<el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" style="max-width: 1200px" active-text-color="#ffffff" :default-active="activePath" router > <el-menu-item index="index">首页</el-menu-item> <el-menu-item index="2" id="product">产品及解决方案</el-menu-item> <el-sub-menu :popper-offset="0" index="walkInto" @click="handleMenuClick"> <template #title>走进兴龙</template> <el-menu-item index="/walkInto#profile">公司简介</el-menu-item> <el-menu-item index="/walkInto#process">发展历程</el-menu-item> <el-menu-item index="/walkInto#news">新闻资讯</el-menu-item> </el-sub-menu> <el-menu-item index="user">用户服务</el-menu-item> <el-sub-menu :popper-offset="0" index="0"> <template #title>招贤纳士</template> <el-menu-item index="campus">校园招聘</el-menu-item> <el-menu-item index="society">社会招聘</el-menu-item> </el-sub-menu> <el-menu-item index="contact">联系我们</el-menu-item> <el-menu-item index="medium">媒体中心</el-menu-item> </el-menu> <script setup> import { useRouter,useRoute } from 'vue-router' import { ref, watch } from 'vue'; const route = useRoute(); const activePath = ref("index"); const updateBreadcrumbItems = (route) => { activePath.value = route.name; }; // 监听路由变化 watch( () => route.path, () => { updateBreadcrumbItems(route); } ); const router = useRouter() function goIndex() { router.push({name: 'index'}); } const handleMenuClick = () => { router.push('/walkInto'); }; </script> 这段代码点击el-sub-menu虽然跳转到了walkInto页面但是走进兴龙没有进行高亮显示 其中子菜单的 index="/walkInto#profile" 为锚点设置点击跳转到walkInto页面id为profile处的位置这个不要进行更改 要如何点击el-sub-menu跳转到walkInto页面同时走进兴龙也进行高亮显示
03-27
比如，每个el-menu-item的index应该设置为对应的路由路径，而el-sub-menu的index也需要正确关联，以便父级在子路由激活时高亮。 接下来，我需要查阅Element-Plus的官方文档，确认相关属性的使用方法。根据文档，el-...
<el-header class="header"> <el-menu class="header-menu" mode="horizontal" default-active="main" active-text-color="#ffd04b" @select="handleSelect" :collapse="false"> <el-menu-item index="1">{{props.device.videos[0].name}}</el-menu-item> <el-menu-item index="2">{{props.device.videos[1].name}}</el-menu-item> <el-menu-item index="3">通道3</el-menu-item> <el-menu-item index="4">通道4</el-menu-item> <el-menu-item index="5">通道5</el-menu-item> <el-menu-item index="6">通道6</el-menu-item> <el-menu-item index="7">通道7</el-menu-item> <el-menu-item index="8">通道8</el-menu-item> </el-menu> </el-header> <el-main class="main-content"> <div class="component-wrapper" :class="{active:activeComponent==='1'}"> <MainAspect v-if="activeComponent==='1'"></MainAspect> </div> <div class="component-wrapper" :class="{active:activeComponent==='2'}"> <AssistAspect v-if="activeComponent==='2'"></AssistAspect> </div> </el-main>有八个菜单，el-main里面怎么改成循环
最新发布
09-26
### 解决方案：动态渲染菜单项 ```vue <el-container> <!-- 菜单区域 --> <el-aside width="200px"> <el-menu :default-active="$route.path" router @select="handleMenuSelect" > <!-- 首页单独处理 -...
<el-sub-menu :popper-offset="0" index="/walkInto"> <template #title>走进兴龙</template> <el-menu-item index="/walkInto#profile">公司简介</el-menu-item> <el-menu-item index="/walkInto#process">发展历程</el-menu-item> <el-menu-item index="/walkInto#news">新闻资讯</el-menu-item> </el-sub-menu> 这个点击走进兴龙为何无法进行跳转
03-27
- 将需要跳转的项使用el-menu-item，并设置index为路由路径。 - 如果必须使用el-sub-menu的标题跳转，则自定义标题内容，添加@click事件，调用router.push。 - 检查路由配置和菜单项的index是否一致，确保default-...
页面// 展示组件页面 <template> <el-container style="height: 100%; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['', '']"> <el-submenu index="0"> <template slot="title"> <i class="el-icon-setting"></i>数据管理</template> <el-menu-item-group> <el-menu-item index="/adminChart">数据统计</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="1"> <template slot="title"> <i class="el-icon-setting"></i>公告</template> <el-menu-item-group> <el-menu-item index="1-1">公告管理</el-menu-item> <el-menu-item index="1-2">反馈信息</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>用户管理</template> <el-menu-item-group> <el-menu-item index="2-1">用户信息</el-menu-item> <el-menu-item index="2-2">教练信息</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-setting"></i>课程管理</template > <el-menu-item-group> <el-menu-item index="3-1">课程信息</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="4"> <template slot="title"> <i class="el-icon-setting"></i>训练馆管理</template > <el-menu-item-group> <el-menu-item index="4-1">器材管理</el-menu-item> <el-menu-item index="4-2">场地管理</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px">管理员</i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>注销</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </template> <script> export default { data() { return {}; }, }; </script> <style> .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } html, body, #app, .el-container { /*设置内部填充为0，几个布局元素之间没有间距*/ padding: 0px; /*外部间距也是如此设置*/ margin: 0px; /*统一设置高度为100%*/ height: 100vh; } .el-aside { height: 100%; background-color: #d3dce6; } </style> js： { path: '/admin', name: 'admin', component: AdminView, children: [ { path: '/adminChart', name:'adminChart', component: ChartView } ] }跳不过去
09-10
你给 `<el-menu-item>` 设置的 `index="/adminChart"` 是**绝对路径**，而它应该是一个**相对路径**，因为它是 `/admin` 下的子路由。 --- ## ✅ 正确写法：使用相对路径 ```html <el-menu-item index=...
Element NavMenu 导航菜单动态遍历与点击回调事件
qq_38101240的博客
12-16 7071
<template> <div> <el-menu default-active="2" class="el-menu-vertical-demo" > <template v-for="(item, index) in menuList"> <el-submenu v-if="item.child&&item.child.length>0" :key="ite
el-menu跳转路由
高电平的博客
01-06 5629
首先添加:default-active属性，属性值为this.$router.path，同时还需要设置router为true（router默认值为ture，直接添加router即可）最后在el-menu-item中的index属性值设为对应的路径。接着在路由中配置好组件路径。
element-ui使用导航栏跳转路由用法（el-menu）
linch9907的博客
04-02 1926
属性： default-active：表示当前active的菜单项的编号 index：类型为字符串，在每一个el-menu-item组件上都有一个编号，给default-active标记 使用菜单栏进行路由跳转： <el-menu :default-active="this.$route.path" router mode="horizontal"> <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.
分享一个VUE Element-UI 的多级菜单动态渲染的组件
热门推荐
王世春的博客
12-23 5万+
以下是组件代码：&lt;template&gt; &lt;div class="navMenu"&gt; &lt;label v-for="navMenu in navMenus"&gt; &lt;el-menu-item v-if="navMenu.childs==null&amp;&amp;navMenu.entity&amp;&amp;na
element中el-menu的动态变化问题
印第安米饭
07-01 5520
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-
Vue el-menu-item实现路由跳转
weixin_62355341的博客
04-14 2万+
场景：用了element-ui的el-menu 菜单 怎样实现路由跳转呢？ 1，在el-menu加上router，添加el-menu的default-active属性，加：动态绑定，值设置为"this.$router.path" ， 2，将el-menu-item的index设置为路由跳转path，和route.js相对应 代码： <el-menu router :default-active="this.$router.path" class="...
elementui 菜单栏添加路由
weixin_35750483的博客
01-02 954
好的，我来帮你解决这个问题。 首先，如果你使用的是 Vue.js 框架，你需要在你的 Vue 项目中安装并引入 ElementUI 组件库。 然后，你可以在你的组件模板中使用 el-menu 组件来创建一个菜单栏。比如： <template> <el-menu> <el-menu-item index="1">菜单项 1</el-menu-it...
el-menu-item 跳转颜色没变
03-18
### 关于 `el-menu` 组件中 `el-menu-item` 跳转时颜色不变的问题 在 Element UI 中，`el-menu` 是一个功能强大的导航菜单组件。当使用 `el-menu-item` 进行页面跳转时，如果发现激活项的颜色未发生变化，通常是因为配置不正确或者缺少必要的属性。 以下是解决方案： #### 1. **确保绑定 `:default-active`** 为了使 `el-menu` 正确识别当前活动的菜单项并应用样式，需要通过 `:default-active` 属性指定默认激活的菜单项索引[^2]。 此属性可以动态绑定到 `$route.path` 或其他变量上，从而实现根据路由路径自动更新激活状态的功能。 ```html <el-menu :default-active="$route.path" background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> </el-menu> ``` #### 2. **启用路由模式 (`:router="true")** 为了让 `el-menu-item` 支持基于 Vue Router 的链接行为，需将 `:router` 设置为 `true`。这样，点击菜单项会触发对应的路由跳转，并且能够正常显示激活状态。 ```html <el-menu :default-active="$route.path" :router="true" background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="/home">首页</el-menu-item> <el-menu-item index="/about">关于我们</el-menu-item> </el-menu> ``` #### 3. **确认 `index` 值唯一性** 每个 `el-menu-item` 和 `el-submenu` 的 `index` 属性值都应具有唯一性。这是因为在内部逻辑中，`el-menu` 使用这些值来判断哪个项目处于激活状态[^3]。如果没有提供唯一的 `index`，可能会导致无法正确定位激活项。 ```html <el-menu :default-active="$route.path" :router="true" background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="unique-index-1">选项一</el-menu-item> <el-menu-item index="unique-index-2">选项二</el-menu-item> </el-menu> ``` #### 4. **自定义 CSS 样式调整** 如果上述方法仍未能解决问题，则可能是由于全局或局部样式的冲突覆盖了默认的激活样式。可以通过检查浏览器开发者工具定位具体原因，并尝试重新定义 `.is-active` 类的相关样式。 ```css /* 自定义激活状态下文字颜色 */ .el-menu .is-active { color: yellowgreen !important; } ``` --- ### 完整示例代码 以下是一个完整的配置案例，展示了如何正确设置 `el-menu` 及其子组件以支持路由跳转和高亮效果。 ```html <template> <div> <el-menu :default-active="$route.path" :router="true" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <!-- 主菜单 --> <el-menu-item index="/">主页</el-menu-item> <el-menu-item index="/profile">个人中心</el-menu-item> <!-- 子菜单 --> <el-submenu index="sub1"> <template slot="title">更多选项</template> <el-menu-item index="/settings">设置</el-menu-item> <el-menu-item index="/help">帮助</el-menu-item> </el-submenu> </el-menu> </div> </template> <script> export default { name: 'NavMenu', }; </script> <style scoped> /* 确保激活状态的文字颜色生效 */ .el-menu .is-active { color: #ffd04b !important; } </style> ``` --- ### 总结 要解决 `el-menu-item` 跳转时颜色不变的问题，关键是确保以下几个方面： 1. 合理配置 `:default-active` 并将其绑定至 `$route.path`； 2. 开启 `:router=true` 来支持路由跳转； 3. 提供唯一的 `index` 值给每个菜单项； 4. 如果必要，可通过自定义 CSS 修改激活状态的表现。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值