关于ElementUI导航组件el-menu刷新页面后恢复默认问题

最新推荐文章于 2022-12-27 20:56:40 发布
最新推荐文章于 2022-12-27 20:56:40 发布
阅读量2.8k 收藏 4
点赞数 5
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42555578/article/details/108221083
版权 
<el-menu 
    :default-active="activeIndex"
    router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
>
	// index值设置为路由path
	<el-menu-item index="/">首页</el-menu-item>
	<el-menu-item index="/mine">我的</el-menu-item>
</el-menu>
...
data () {
    return {
        activeIndex: this.$route.path
    }
},
仍在努力中
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
01-21
具体代码如下所示： 　　　　　　　　 　　　　　　　　//router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径，字符串，绝对路径 　　　　　　　　 　　　　　　　
el-select-tree:ElementUI的el-select与el-tree结合
05-07
精选树 ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完
【element-plus】中菜单栏（el-menu）常用
qq_44971635的博客
12-02 5087
elment-plus中el-menu常用的使用
element ui menu 菜单的设置显示与收起
qq_22656655的博客
06-04 9765
最近做项目遇到 要使用方法设置menu的展示与收起 <el-menu router mode="vertical" :collapse="showMenu" :default-openeds="defaultOpenedsArray" :default-active="activeUrl" background-color="#304156" text-color="#bf..
Element ui NavMenu 默认展示一个菜单的子菜单，点击子菜单会折叠的解决方法
qq_36714045的博客
12-09 2244
改成 :default-openeds="['1','2']" 数值写死改成变量就行了。问题：点击子菜单，会折叠起来。
el-menu刷新回到默认
weixin_57166400的博客
12-27 1231
一般在写后台管理系统，使用menu组件，每个都是一条路由，然而，有时候我们在某个路由上刷新一下，路由还保留着，但是menu-item的高亮效果却到了默认的那一项上，就很无语,下面是我改良过的，思路嘛，就是把el-menu的default-active这个属性不给它常量，给它一个变量，这个变量在onmouted生命周期中拿到路由对象的path即可在刷新后保持高亮状态。
Vue3 Element-plus导航栏,页面点击刷新后失去当前导航栏点击高亮,到默认地址
weixin_56716246的博客
11-09 1348
Vue3 Element-plus导航栏,页面点击刷新后失去当前导航栏点击高亮,到默认地址
element ui 中表格数据大时页面卡顿，出现白屏问题解决
weixin_42080477的博客
10-26 3974
使用umyui 插件 umyui文档地址 <u-table use-virtual show-body-overflow="title" show-header-overflow="title" :data="tableData" :span-method="arraySpanMethod" :cell-class-name="tableRowClassName" border style="width: 100%"
ElementUI导航菜单使用(并解决刷新会调回首页)
眾K的博客
11-25 3569
新桥 <el-menu :default-active="$route.path" //刷新绑定当前页面路径不会跳转 router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 @select="handleSelect" //菜单激活回调 unique-opened //是否只保持一个子菜...
解决Vue3.0整合element plus时el-menu导航选中后刷新页面保持当前选中状态
weixin_44455772的博客
04-29 5277
简要概述 element plus是element官方针对Vue3.0做的一套前端UI组件，在开发过程中经常会使用到el-menu这个组件，而且我们会将当前激活的菜单设置高亮，而如果不设置default-active属性，我们则会遇到刷新页面后当前激活的菜单项不高亮的问题 下面来解决这个问题，本文是根据vue3做的，之前在网上看到好多教程，都是提示将default-active设置为$router.path，而在vue3中并没有起作用。 解决步骤 我通过浏览器console出‘this.$router
element 中 el-menu 组件的无限极循环思路代码详解
10-15
主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
element ui 中级联选择器，点击完下拉框收回
lazy_guo的博客
11-02 656
在el-cascader标签中添加ref属性，$refs中添加toggleDropDownVisible()方法
element框架导航菜单在页面刷新时会回到默认项
qq_15769147的博客
08-09 2326
<template> <div> <el-menu :default-active="activeIndex" router class="el-menu-vertical-demo" @select="handleSelect" background-color="#545c...
vue element-ui级联选择器选中后下拉框自动收起
在奔跑中寻找的博客
04-21 6252
Cascader 级联选择器 数据渲染 通过 :options=“options” 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ checkStrictly: true }" 1、点击后下拉框自动收起实现 设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。（虽说简单，但是这个属性我找了半天，官网根本没有说~~~~(>_...
关于Element-ui左侧菜单栏刷新不保留当前状态问题
m0_56420453的博客
05-23 531
这个问题还是比较常见的,在开发项目中也是比较常用的废话不多说上代码（根据一些大牛然后缩减的，勿喷） 第一步首先在 el-menu里有这么一个属性default-active 首先给他绑上一个变量如： 第二步就是 el-menu-item里的index 绑定要跳转的路由页面如： 第三步就是在 mounted里进行最后一步 如 第一步起的名字 active1 所以： 解：最后一步的$route.name 你可以理解为就是你路由里的路由名称 因为分为 path和name 我们在这只用nam...
vue动态添加路由后刷新页面白屏问题
weixin_47673864的博客
06-10 3502
页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（） 在
解决：vue在menu菜单上方有空白，无法消除的情况
OwnYoung的博客
05-02 730
在app.vue的style中删去margin-top并添加以下下面三行以消除顶部和左侧空白
什么是yolov10，简单举例.md
最新发布
05-25
YOLOv10是一种目标检测算法，是YOLO系列算法的第10个版本。YOLO（You Only Look Once）是一种快速的实时目标检测算法，能够在一张图像中同时检测出多个目标。
elementUi的el-menu 导航菜单 怎么关闭点击开启下拉框
06-01
要实现关闭点击开启下拉框的功能，可以使用 `before-dropdown-toggle` 事件来实现。具体操作如下： 1. 在 `el-menu` 组件上添加 `@before-dropdown-toggle="handleToggle"` 监听事件。 2. 在 `methods` 中定义 `handleToggle` 方法来处理点击事件。 3. 在 `handleToggle` 方法中使用 `event.stopPropagation()` 方法来阻止事件冒泡，然后根据当前菜单项的状态来切换下拉框的显示状态。 示例代码如下： ```html <template> <el-menu :default-active="activeIndex" mode="horizontal" @before-dropdown-toggle="handleToggle"> <el-submenu index="1"> <template slot="title">导航一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> <el-menu-item index="1-3">选项3</el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title">导航二</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> </el-menu> </template> <script> export default { data() { return { activeIndex: '1-1', isOpen: false }; }, methods: { handleToggle(event, submenu) { event.stopPropagation(); submenu.isOpened ? submenu.handleCollapse() : submenu.handleExpand(); } } }; </script> ``` 在上述示例中，我们在 `methods` 中定义了 `handleToggle` 方法来处理点击事件。该方法接收 `event` 和 `submenu` 两个参数，其中 `event` 是当前点击事件对象，`submenu` 是当前菜单项的子菜单对象。 在 `handleToggle` 方法中，我们调用了 `event.stopPropagation()` 方法来阻止事件冒泡，然后使用 `submenu.isOpened` 属性来判断当前菜单项的状态。如果菜单项已经打开，则调用 `submenu.handleCollapse()` 方法来关闭下拉框；否则调用 `submenu.handleExpand()` 方法来打开下拉框。这样就可以实现关闭点击开启下拉框的功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值