关于element ui导航菜单中二级菜单中页面跳转菜单高亮的问题

最新推荐文章于 2024-08-12 11:44:39 发布
最新推荐文章于 2024-08-12 11:44:39 发布
阅读量3.8k 收藏 6
点赞数 1
文章标签： javascript vue.js es6 less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42174401/article/details/108498134
版权
本文讨论了在Element UI导航菜单中处理二级菜单高亮的问题，特别是当页面跳转和刷新时如何保持正确的高亮状态。通过获取当前路由的name值，并根据name值判断路由高亮，实现了即使在不同路由下也能保持特定菜单高亮的效果。避免了大量if语句，提供了一种更优雅的解决方案。
摘要由CSDN通过智能技术生成

1.一级菜单高亮

如果只有一级菜单,使用官方给的方法即可

:default-active="$route.path"

2.二级菜单高亮

关于二级菜单高亮的问题,不得不说走了很多坑,试了很多中方法,最常见的

    let defaultMenu = window.location.hash.substr(window.location.hash.indexOf(<
最低0.47元/天 解锁文章
学习让人快乐呢
关注
vue项目 标签页点击对应多级菜单高亮
weixin_59597498的博客
12-14 875
el-menu属性 :default-active="activeIndex" ，计算属性activeIndex 如果报错，可能是计算属性没有加get（），set()， 这样报错解决 同时el-menu-item当中还是设置index属性，有的文章会说是设置为route，就我个人实验而言，多级菜单不适用 如果像上述这样写，router路由index.js当中path和name必须保持一致，不然菜单不会有高亮效果 最后效果： ...
element ui路由配置文件_Vue+Element-ui实现左侧二级导航（可配置路由、所有路由层级可统一、可根据路由高亮菜单项、刷新时可自动展开定位到当前路由）...
weixin_39669204的博客
02-06 394
这里使用的Element文档版本是2.13.1。路由文件index.js：import Vue from 'vue'import Router from 'vue-router'import Login from '@/components/Login'import Main from '@/components/Main'import Form from '@/components/Form'i...
elmentui 点击二级菜单，刷新后依然高亮
thingir的博客
07-17 285
原理： 1）使用:default-active='activePath ' 绑定属性activePath 2）点击时，使用select事件把当前path放进sessionStorage里， 3）刷新时，从sessionStorage里再获取回来，赋值给activePath <el-menu background-color="#222832" text-color="#fff" :router="true" :default-active='activePath ' @select="saveAct
Element UI左侧导航栏路由跳转实现~
最新发布
m0_62626838的博客
08-12 368
1、首先在Element UI的导航菜单中有个router属性，开启这个属性会在激活导航时以 index 作为 path 进行路由跳转，因此我们一般会将导航栏的index动态设置成‘/user’这种形式，以此来实现路由跳转。
【 Element UI 】二级菜单高亮显示
zwj
07-29 1277
保持二级菜单点击之后高亮 <el-menu :collapse="isCollapse" :collapse-transition="false" background-color="#fff" text-color="#000" active-text-color="#ffd04b" :router="true" :default-active="aciveNavPath" > </el-menu> <script>
帝国cms同时调用一级、二级栏目并当前栏目高亮显示的方法
winkexin的博客
05-14 724
今天用帝国cms出现了需要同时调用1，2级栏目并给当前栏目高亮显示的需求，经过一番搜索，用以下代码即可实现（包含首页高亮） 而且可以无限嵌套。23.02.20拓展，以上只支持一级栏目高亮，二级栏目高亮用这个。如果是当前栏目是on 是首页class是menuo。
elementui中导航组件点击二级菜单页面跳转但是二级菜单关闭问题
m0_51073906的博客
07-20 2153
elementui中导航组件库 多个一个菜单中包含二级菜单 第一次点击二级菜单页面跳转但是二级菜单关闭功能 解决方法： :default-active="$route.path" :unique-opened="true" 根据路由判断是否展开当前选中项 ...
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
在Vue.js框架中，结合Element UI库，动态加载路由是一种高效的方法来管理复杂的应用程序菜单结构，特别是当涉及到多级菜单时。以下是如何使用这种方式实现三级菜单页面显示的详细步骤和知识点： 首先，动态加载路由...
element-ui使用导航栏跳转路由的用法详解
10-18
通过以上知识点的学习，我们可以掌握在使用Element UI创建导航栏时实现路由跳转的方法，并且能够应对项目中可能遇到的路由配置和管理问题。这些技术的应用，将有助于开发更加丰富、用户友好的单页应用（SPA）。
vue+element导航栏高亮显示的解决方式
10-16
在构建基于Vue.js的Web应用时，经常需要使用Element UI框架提供的导航栏组件来创建页面顶部的菜单导航。在使用Element UI的组件时，常常会遇到导航项在页面跳转或刷新后无法正确显示高亮状态的问题。本文将详细介绍...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
Element-ui中导航菜单高亮问题
this is it
04-03 6613
开启路由模式 <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="handleSelect" route...
vue + element 左侧导航栏选中子级，父级高亮问题了
shumabaobei1214的博客
09-07 3832
在element 当中，我们选中了子级（二级菜单），有高亮，但是对应的父级（一级菜单）没有任何选中状态。如图 但是在项目中，一般情况都会让对应的父级也呈现高亮的状态。如图，人员管理为一级菜单 =》人员档案为二级菜单 （为了效果明显，给的比较显眼的背景色），第一个图是展开的样式。第二个是收缩起来的样式（职位管理深灰色，是触摸上去的样式） 其实在element钟，功能都是有的，选中会有个类名，只是没有给他添加样式，只需要在你写导航栏页面给他添加以下样式就可以了。 //对应子级，...
element ui+vue实现导航栏菜单以及页面跳转
热门推荐
H-rosy的博客
06-24 1万+
关于博主： 不知道算不算的上入门，就是刚刚学习vue框架，断断续续的学习，所以有些地方讲的不正确也欢迎大家批评斧正，希望与大家共同进步 问题描述 对于初学前端的我们来说搭建一个路由导航界面还是比较困难的，在这里给大家分享一下最近我学到的一些这方面的知识 首先给大家看看效果图吧： 写的就是一些很基础的东西，因为这主要是学习路由导航的搭建原理。下面这个代码就是router下的index.js文件，就是配置路由的地方，如果你对路由的注册还不太懂请戳这里 import Vue from 'vue' impor
当 element-Ui 中el-select选择器选中一个值，其余选项全部高亮，解决方法
hap1994的博客
03-03 1354
change方法中绑定$event传参，可以选中这个对象，并在selSiteLocation方法中取到，注意其中的。:value-key="'kid'" :key="item.kid" 关键配置。value-key="kid"设置，选中当前高亮。
Vue-element tab选项卡二级页面返回缓存选中页签
weixin_41884808的博客
07-25 2540
需求 我的项目里，有个页面是两个选项卡，两个页签里稍有不同，用的组件，然后各个选项卡都有二级详情页，需求就是从二级详情页返回的时候，要返回上次选中的选项卡页签。 思路 在elementUI中，有一个默认选中的api它就是value / v-model，[点击可以查看官网api](https://element.eleme.cn/#/zh-CN/component/tabs) 方案 我是方案就是换成你，在离开本页的时候，存到cookie里，进入本页，获取cookie，我感觉还挺简单的，也很
elementUI的Menu组件高亮问题并保存所选高亮
qq_44906497的博客
09-21 1042
3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。
el-menu页面离开弹窗，当前激活菜单的高亮问题
qq_39750019的博客
10-17 647
el-menu页面离开弹窗，当前激活菜单的高亮问题
Element UI：NavMenu 导航菜单实战指南
本文主要探讨了Element UI框架中的NavMenu导航菜单组件的使用方法，通过实例代码详细解析了如何创建和配置水平模式的导航菜单，包括菜单项、子菜单及禁用状态的设置，旨在帮助开发者提升其在网页应用开发中的实践...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值