element-ui el-menu 刷新保持高亮的写法

最新推荐文章于 2024-08-08 15:05:37 发布

鳌拜的弟弟-熬夜:)

最新推荐文章于 2024-08-08 15:05:37 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/Libra_rookie/article/details/106130836

版权

本文介绍了如何在使用Element-UI的el-menu组件时，确保页面刷新后菜单项的高亮状态能够得到保存。通过结合Vuex进行状态管理，或者利用Cookie或SessionStorage存储选中状态，可以实现这一功能。详细步骤和代码示例将帮助开发者理解并应用到实际项目中。

摘要由CSDN通过智能技术生成

<el-menu :default-active="$route.path" :router="true" :unique-opened="true" background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b">

<!--router当导航激活时允许以i

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鳌拜的弟弟-熬夜:)

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue3 使用element-ui的el-menu刷新之后保持选中状态

jieweiwujie的博客

02-26

852

3、点击链接是可以完美做到刷新后会保持选中状态，但是当我们手动输入路由的时候，页面会跳转但是css样式不会改变。当输入的路由和当前的路由不一样的时候。把当前的路由赋值给activeIndex。mounted函数中把这个当前路径赋值给 activeIndex 即赋值给了 default-active 参数。第一次访问的时候sessionStorage是空的，所以要加入默认的路径。官网示例给出的是2个参数key和keyPath，分别打印出来后是一样的都是当前的路径。

vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由

sunlizhen的专栏

12-10

2384

路由: const routes = [ { path: '/', name: 'Home', meta:{isLogin:true,title: 'Home'},// 添加该字段，表示进入这个路由是需要登录的 component: resolve=>(require(["@/views/index.vue"],resolve)), children: [ { path: '/monitor'.

参与评论您还未登录，请先登录后发表或查看评论

el-menu刷新回到默认

weixin_57166400的博客

12-27

1334

一般在写后台管理系统，使用menu组件，每个都是一条路由，然而，有时候我们在某个路由上刷新一下，路由还保留着，但是menu-item的高亮效果却到了默认的那一项上，就很无语,下面是我改良过的，思路嘛，就是把el-menu的default-active这个属性不给它常量，给它一个变量，这个变量在onmouted生命周期中拿到路由对象的path即可在刷新后保持高亮状态。

el-menu刷新保持选中状态

最新发布

前端小菜鸟也有人起的博客

08-08

282

el-menu刷新保持选中状态

element el-menu选中后刷新页面保持当前页选中状态且选中高亮

weixin_71160384的博客

12-01

1108

default-active属性代表当前激活菜单的 index，所以想让哪个页面作为项目一进来的首页，就写哪个页面的路径。一定要加上router属性，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，项目的需求是要有选中的背景色且去掉下边框。

第6章 el-menu刷新保持当前菜单选项与角色页面

zhoujian_911的专栏

12-24

1677

1重构：src\components\AdminLayoutComponen.vue(el-menu刷新保持当前菜单选项)

使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

10-16

在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...

Element-Ui组件 NavMenu 导航菜单的具体使用

10-16

如果需要在菜单项中嵌入链接，可以直接使用`<a>`标签，如`<el-menu-item index="4">订单管理</a></el-menu-item>`，这样点击菜单项就会跳转到指定URL。总的来说，Element-UI的NavMenu组件提供了一套完整的导航...

vue element路由跳转菜单常亮

GITAA的博客

03-22

218

vue 路由跳转设置菜单高亮在 el-menu 上 :default-active=“defaultActive” computed 配合elm的 :default-active=“defaultActive” defaultActive(){ return this.$route.name }

vue项目标签页点击对应多级菜单高亮

weixin_59597498的博客

12-14

875

el-menu属性 :default-active="activeIndex" ，计算属性activeIndex 如果报错，可能是计算属性没有加get（），set()，这样报错解决同时el-menu-item当中还是设置index属性，有的文章会说是设置为route，就我个人实验而言，多级菜单不适用如果像上述这样写，router路由index.js当中path和name必须保持一致，不然菜单不会有高亮效果最后效果： ...

el-menu自定义控件，点击菜单栏/自动跳转时切换高亮

x_hxs的博客

11-30

816

ElementUI导航菜单使用(并解决刷新会调回首页)

眾K的博客

11-25

3647

新桥 <el-menu :default-active="$route.path" //刷新绑定当前页面路径不会跳转 router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 @select="handleSelect" //菜单激活回调 unique-opened //是否只保持一个子菜...

怎么让Element中的＜el-menu＞在刷新后保持当前选中的菜单展示菜单保持不变

qq_64725840的博客

07-12

2496

怎么让Element中的在刷新后保持当前选中的菜单展示菜单保持不变

如何实现Elemnt-UI中NavMenu菜单的高亮

qwerewf的博客

02-02

885

**问题：**本人最近在用Element-ui做一个商品后台管理系统,在使用NavMenu时需要使导航菜单高亮的需求。代码： <template> <el-container> <el-header> <el-button type="info" @click="Exit">退出</el-button&g...

vue 中使用element-ui的menu选中高亮的问题

study_way的博客

04-17

1403

自己在做一个小项目的时候遇到的问题，看了很多博主发的解决方法，然后记录一下最终解决了我问题的这篇。内容都是引用的其他博主的原文在使用element中的menu组件时，根据官方文档，可以设置给el-menu设置router属性为：true，给el-menu-item设置index的值为路径，就可以实现点击导航跳转到指定路由。这样做虽然能实现跳转，但是，若刷新浏览器，则导航会跳转到默认的选中项，而不是我们离开时的导航。百度时大部分回答是将default-active属性设置为：$route.path，

Element ui 导航栏刷新时高亮

IT_iosers的博客

08-04

382

1、在组件中 <el-container> <el-aside> <el-row class="tac"> <el-col> <el-menu :default-active="$route.meta.parentpath" //重点class="menu" background-color="#344055"

element页面点击跳转，菜单导航栏也高亮

plusyyyy的博客

04-19

2152

1.在el-menu里加上:default-active="onRoutes"2.在computed写上这个方法3.在route文件里，加上meta{activeMenu:‘要高亮的路由’}

element-ui el-menu

07-27

Element-UI 是一个基于 Vue.js 的 UI 组件库，而 el-menu 是 Element-UI 中的一个组件，用于创建菜单导航。 el-menu 组件可以帮助我们快速构建垂直或水平的导航菜单。它提供了多种样式和布局选项，可以灵活地满足...