vue el-submenu实现导航跳转

最新推荐文章于 2025-06-28 20:34:21 发布
最新推荐文章于 2025-06-28 20:34:21 发布
阅读量1.7w 收藏 10
点赞数 4
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sweet_yaya457/article/details/86627089
本文详细介绍如何在ElementUI中使用el-menu组件实现页面跳转功能。通过设置route属性、利用index作为路径、动态获取default-active及配置路由，实现home.vue组件内的导航跳转。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

样式直接参考ElementUI官网即可

布局确定之后需要实现跳转

（1）el-menu添加route属性，属性的使用查看官网介绍呀

（2）每个el-menu-item的index是跳转的路径，可以理解为配置路由中的path

 (3) default-active:当前激活菜单的 index，至当前点击的路由地址，这个是动态的，所以写的时候需要可动态获取

（4）配置路由

当前这个组件是home.vue，跳转的部分固定在右侧，所以理解为跳转都是在home这个组件内，所以在配置路由时将需在此跳转的组件的子组件中，如下图

 

【ElementUI】组件库el-menu组件在退出抽屉时无法将选中状态恢复到第一项
Y1lis的博客
07-15 2509
el-menu组件在退出抽屉再进入时无法将默认选中的高亮状态设置成第一项，两行代码解决这个问题。
（1）vue基于el-menu实现导航菜单简单封装
weixin_42283712的博客
09-10 2605
el-container布局 <template> <el-container class="l_container"> <el-aside width="200px"> <SideMenu/> </el-aside> <el-container> <el-header>Header</el-header> <el-main>Main&l
element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面
weixin_44990895的博客
05-13 1万+
【代码】element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面。
vue2 实现 el-menu 菜单过滤
最新发布
king_sord的博客
06-28 150
通过element-ui 的 el-menu 实现一个菜单过滤的效果，左侧是菜单，右侧是动态组件。菜单有个需求，需要根据指标名称搜索并打开相应的菜单。
vue框架 element导航菜单el-submenu 简单使用方法--以侧边栏举例
SurepMan的博客
08-05 2924
实现动态增删菜单栏的效果，所以要在数据库中建表。
Vue el-menu高亮设置及点击菜单项实现路由跳转
热门推荐
爱哭的毛毛虫的博客
11-13 1万+
el-menu相关知识记录一、el-menu菜单项高亮设置二、点击菜单项实现路由跳转 2021/11/13 知识点记录 一、el-menu菜单项高亮设置 el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。 $ route.path对应当前页面路由的路径。 $ route
Element-ui -- el-submenu
m0_69507480的博客
06-23 2067
Element-ui -- el-submenu
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
Vue2+El-Menu 实现路由跳转及当前项的设置方法实例 Vue.js 是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 vue2+...
vue 点击el-submenu跳转
06-04
要实现点击 `el-submenu` 跳转的功能，可以在 `el-submenu` 组件上绑定 `click` 事件，然后在事件处理函数中使用 `this.$router.push` 方法进行路由跳转。 例如，假设你的 `el-submenu` 组件的 `index` 属性为 `"1...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
2. **`router`属性**：当设置为`true`时，`el-menu-item`和`el-submenu`可以通过`index`属性作为路由进行页面跳转。这样，当用户点击菜单项时，Vue Router会处理对应的路由变化。 3. **`unique-opened`属性**：如果...
使用el-menu打开新标签页到外部网址
Phoebe_helloworld的博客
08-03 7359
使用element-ui的 el-menu 组件从新标签页打开外部链接；保持菜单激活状态；保持子路由菜单激活状态；保持子路由参数
vue菜单＜el-submenu＞默认展开状态失效，刷新依然是折叠状态
weixin_66071584的博客
10-21 1052
如果页面刷新后图片菜单依然处于折叠状态，这可能是因为的展开状态并没有被持久化。Element UI 的 组件通常需要一个唯一的 index 属性来控制展开状态。如果你希望某个默认展开，你可以使用属性。在你的代码中，你可以在 组件上添加 default-openeds 属性，并设置为包含图片子菜单 index 的数组。这样，无论页面如何刷新，图片子菜单都会默认展开。
NavMenu导航菜单el-submenu点击事件及激活状态变化
adminguojieBin的博客
09-23 1万+
多级菜单时一级菜单添加点击事件以及导航栏当前激活状态变化
Element-plus中点击el-sub-menu时所有同级的其他子菜单同时展开或折叠
c335000的博客
08-06 3516
只需要给添加一个index属性，使不同的子菜单能够得以区分，就可以解决问题了。这里的index属性值并不重要。
el-sub-menu二级菜单
qq_55928824的博客
09-25 1690
el-sub-menu
点击一个 el-sub-menu 导致其他所有子菜单也展开的问题
Saehun1994的博客
07-19 1865
在使用 Element Plus 的菜单组件时，如果你遇到了点击一个导致其他所有子菜单也展开的问题，这通常是由于菜单的默认行为或状态管理不当造成的。默认情况下，Element Plus 的菜单组件（el-menu）并不会在点击一个子菜单（）时自动展开其他所有子菜单。：如果你使用了 Vuex 或其他状态管理库来控制菜单的展开状态，并且这些状态被错误地设置为全局共享或相互影响的，那么可能会导致点击一个子菜单时影响到其他子菜单的状态。：检查el-menu和的或属性是否被错误地设置为了一个会影响多个子菜单的值。
关于el-sub-menu组件在递归组件中丢失首行缩进的样式的问题（很细，可以多多交流）
m0_58338655的博客
11-11 452
但这三者并不是同一时刻生成的（其中两个子菜单是通过递归到下一层中生成的，数据大屏是第一次处理该组件代码的时候就生成）（简单说明为什么不一样生成：是因为通过判断路由层级，想要了解更多可以看vue3尚硅谷的40级）在实现 根据项目路由动态生成导航菜单 组件的时候，需要通过递归该组件来完成子菜单的展示，发现在使用el-sub-menu组件的时候，el-sub-menu组件并没有将子菜单项的首行缩进样式带到下一层递归中（可能是el-sub-menu组件无法正确识别嵌套的子菜单层级导致的）。
el-menu写菜单栏
m0_59011179的博客
03-06 2086
vue+el-menu
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值