elementui中导航组件点击二级菜单页面跳转但是二级菜单关闭问题

最新推荐文章于 2024-05-23 08:53:39 发布
最新推荐文章于 2024-05-23 08:53:39 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51073906/article/details/118934408
版权
本文介绍了如何在Element UI的导航组件中，通过设置`default-active`和`unique-opened`属性，实现在第一次点击二级菜单时页面跳转并保持菜单关闭状态。关键在于利用Vue的路由匹配判断展开状态。
摘要由CSDN通过智能技术生成

elementui中导航组件库 多个一个菜单中包含二级菜单 第一次点击二级菜单页面跳转但是二级菜单关闭功能
解决方法：

 :default-active="$route.path"
 :unique-opened="true"

根据路由判断是否展开当前选中项

小刘哥哥--
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于element ui导航菜单中二级菜单中页面跳转菜单高亮的问题
weixin_42174401的博客
09-09 3793
1.一级菜单高亮 如果只有一级菜单,使用官方给的方法即可 :default-active="$route.path" 2.二级菜单高亮 关于二级菜单高亮的问题,不得不说走了很多坑,试了很多中方法,最常见的 let defaultMenu = window.location.hash.substr(window.location.hash.indexOf("/")); this.activerouter = this.$route.path; 截取当前路劲上的地址,然后在赋值给高亮属性,
详解VUE Element-UI多级菜单动态渲染的组件
10-17
主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element ui 点击body 导航子菜单收缩的问题
Wmeng_4065的博客
11-21 7533
最近用element ui 发现点击其它区域就关闭当前子菜单，经过试验发现是版本问题，element ui 最新版本2.4.10会有这么一个问题，目前个人解决方案有 方法一： 改变被关闭子菜单的父菜单的颜色，以标注当前页面所属 方法二： 先锁定2.4.9版本...
element ui element菜单默认不展开，踩坑
最新发布
weixin_44098452的博客
05-23 305
element ui 2.15版本 的菜单给了官方例子 ，是会默认展开的，如下图1 图2图1图2研究了半天发现，为什么我用接口的数据 自己循环出来的不能默认展开呢，下面是部分代码图3图3我的需求大致就是左侧一个二级的级联数据，右边的是表格，进来页面需要默认左侧选择第一个去过滤表格数据------------上面的大致描述问题。
element-ui NavMenu菜单组件垂直显示时点击其它区域关闭子菜单解决方法
weixin_34082177的博客
11-20 4102
element-ui 2.4.10的NavMenu组件mode为"vertical"，当子菜单展示时，如果点击子菜单以外的任何区域，会把打开的子菜单关闭，这个十分不合理，另外点击父菜单时，只会展开子菜单，更合理的方式是，点击父菜单，在展开子菜单的同时打开父菜单所指向的链接，或者打开第一个子菜单指向的链接。因为项目紧急，等不及官方更改，官方...
elment el-menu当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover三级菜单后，二级菜单无法自动收回
qq_38778882的博客
04-24 629
参考文章：https://blog.csdn.net/ych6666/article/details/122539355。将el-submenu的属性 popper-append-to-body去掉。
elementUI中导航菜单，使打开的菜单关闭
IT_Dilraba_bin的博客
07-28 3157
elementUI中导航菜单，使打开的菜单关闭，导航菜单的Menu Events的close回调事件
el-menu 手风琴模式下永远展开一个菜单不让其关闭
weixin_44733223的博客
09-06 2324
el-menu手风琴模式不让其一级菜单全部关闭,总保持一个展开状态
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
- 菜单项的点击事件会触发Vue Router的导航，`:index`属性与路由配置的`path`对应，使得点击菜单时能根据指定路径跳转至对应的组件。 7. **权限控制**： - 为了实现基于角色的权限控制，可以在路由配置中添加一个...
组件首页导航栏和左侧菜单栏
09-25
本篇将详细讲解如何在Vue项目中实现“组件首页导航栏和左侧菜单栏”的功能。 首先，我们需要理解Vue组件的概念。Vue组件是可复用的代码块，可以视为小型自包含的应用。它们是构建大型应用的基本单元，通过组合这些...
vue+elementui实现多层树形菜单
10-16
如果你的应用使用Vue Router进行路由管理，你还可以将树形菜单的节点与路由链接起来，实现点击菜单跳转页面的功能。这通常涉及到动态路由和`beforeRouteLeave`导航守卫。 ### 6. 自定义样式与扩展 Element UI的树形...
Element NavMenu导航菜单的使用方法
10-15
在例子中，`<el-menu-item>`代表一级菜单项，而`<el-submenu>`则表示可展开的子菜单。`<template slot="title">` 用于定义子菜单的标题。例如： ```html 我的工作台 ... ``` `<el-menu-item>` 和 `...
html 动态加载的菜单 当菜单点击一下，打开接着又关闭
小米粒的博客
11-05 1876
当菜单点击一下，打开接着又关闭  有可能是jquery 加载了两遍   认真检查一下代码
vue element el-Cascader 级联选择器 收起二级菜单的问题解决办法详解
热门推荐
@必意玲
09-19 1万+
最近做项目经常用到 el-Cascader 这个级联选择器，也是踩过好过坑，这里记录下自己踩的坑。 先说一下问题： 当在鼠标移动到 组件 位置触发子菜单后，再移动到 指南 位置，但是 组件 的子级菜单并没有收起 ，如此移来移去，让人感觉就像是 指南 下面有子级菜单，其实指南并没有子级菜单。 1. 总结一句话：移到父菜单 相应子菜单出现 没有子菜单 则所有子菜单消失 2. 解决办法 通过 slo...
html中二级菜单老是自动消失,下面这个导航在IE下鼠标移动到二级菜单的过程中二级菜单就消失了，请问有没有什么办法解决？...
weixin_42511702的博客
05-31 622
1 2 3 4 Demo5 6 7 #cssmenu ul{margin:0;padding:0;}8 #cssmenu li{margin:0;padding:0;}9 #cssmenu a{margin:0;padding:0;}10 #cssmenu ul{list-style:none;}11 #cssmenu a{text-decoration:none;}12 ...
el-cascader 勾选内容后自动关闭内容选择面板
qq_17686345的博客
06-15 3339
element-plus 和element-ui的el-cascader面板关闭方式有点不同 element-ui的关闭方式 this.$refs.CascaderRef.dropDownVisible = false 而element-plus的关闭方式 CascaderRef.value.togglePopperVisible() // vue3.0写法 this.$refs.CascaderRef.togglePopperVisible() //vue2.0写法 ...
vue使用element-ui，页面刷新，导航栏选中问题
前端打工人的博客
03-24 1746
当你在使用纵向导航时，刷新了页面，左侧导航显示了默认的选项，导航发生了变化，而路由及页面并未改变，那怎么让它选中路由的页面呢 :default-active="activeIndex" data() { return { activeIndex: '1', }; }, 第一种方法： 把data中的activeIndex去除，改为计算属性，这一步解决纵向导航栏的问题 computed: { activeIndex() { const ar
解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题
sumimg的博客
09-10 1万+
解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题 情况一：单个菜单页面刷新导航失去高亮；（如下图这种菜单类型） 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值，解决这个只用取出当前页的路由然后赋值给activeIndex即可，代码如下： <el-menu :default-active="activeIndex" mode="horizonta
elementui菜单导航
09-17
ElementUI是一套基于Vue.js的前端UI组件库，其中包括了菜单导航组件，方便开发者在网页中创建功能齐全的导航菜单。ElementUI的菜单导航组件可以根据需要灵活设置菜单的结构和样式。 在使用ElementUI菜单导航组件时，我们首先需要创建一个Menu菜单组件，并将菜单项MenuItem或子菜单SubMenu添加到菜单中。菜单的展示形式可以是水平导航菜单（horizontal），也可以是垂直侧边栏（vertical），甚至可以是缩起的侧边栏（collapse）。 菜单项可以设置标题、图标和路由等属性，点击菜单项时可以触发相应的事件处理函数，进行页面跳转或其它操作。子菜单可以通过添加MenuItemGroup或MenuItem来创建，实现多级菜单的嵌套。 除了基本的菜单导航外，ElementUI还提供了一些附加功能，例如右键菜单（ContextMenu）、多选菜单（MultipleMenu）和面包屑导航（Breadcrumb）。这些功能可以进一步提升菜单导航的灵活性和用户体验。 总的来说，ElementUI的菜单导航组件具有丰富的功能和易用的API，帮助开发者快速构建漂亮且功能齐全的菜单导航。无论是简单的网页导航还是复杂的后台管理系统，ElementUI的菜单导航组件都能满足我们的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值