Element-ui导航组件NavMenu页面刷新后导航高亮问题

navMenu.vue路由激活示例
最新推荐文章于 2022-03-10 15:03:07 发布
原创 最新推荐文章于 2022-03-10 15:03:07 发布 · 1.8k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element-ui #vue #前端

本文介绍了一个简单的navMenu.vue文件代码示例，展示了如何通过设置:default-active=$route.path实现路由链接的自动激活高亮。此方法无需额外配置，仅需在组件中正确引用router。
  1. 文件navMenu.vue，部分代码
    在这里插入图片描述
  2. 只需设置:default-active="$route.path"和router,不需要改动其它地方
点击Element侧栏导航，顶栏导航的高亮背景效果不消失问题；以及解决刷新导航菜单栏高亮效果消失的问题
qq_39918566的博客
05-12 1383
一、问题描述 1）点击侧栏导航后，顶栏导航的高亮效果还在（问题图片如下，问题已解决）。 2）达到的目的：点击侧栏导航后顶栏导航的高亮背景消失；点击顶栏导航时侧栏导航的高亮效果消失。 二、实现过程 使用了Select（菜单激活回调），清空了左侧菜单栏的高亮样式。以下是部分代码，以顶栏导航的为例子，侧栏导航同理可实现。 1.HTML部分： <!-- 顶栏菜单 activeIndex是data里面的一个参数--> <el-menu router :default-acti
Element-ui NavMenu 导航菜单高亮问题
0的0次方的博客
02-26 1409
查了很多文档发现 解决方案一： 开启路由模式，标签中设置default-active 绑定 :default-active="$route.path" 发现不能完全解决我遇到的问题 于是，参考文档：https://blog.csdn.net/Jayne_z/article/details/88028336 综合得到第二套方案 解决方案二： <el-menu :default-active...
elementui中NavMenu 导航菜单高亮问题——解决多种情况
热门推荐
winne雪
07-08 2万+
前言： 如果使用elementui这个框架来开发系统，那么我们几乎都会使用到NavMenu 组件。我们可能需要菜单根据我们点击的那一项高亮显示，刷新页面了之后还是会相应的高亮显示。 我在项目中遇到的情况有三种：（vue-cli + elementui） 1、横向菜单 如果仅有一个菜单，那么点击当前菜单高亮；如果菜单下有二级下拉，那么点击下拉二级菜单高亮，并且一级菜单也高亮（刷新页面后依旧保持高亮）...
路由切换之后默认高亮/刷新页面后导航栏路由与页面不一致问题终极方案
m0_56986233的博客
03-10 1050
路由切换默认高亮 请注意，一定要保证你:default-active 路由的值 和你路由path的值相同 下面我列出方法，利用sessionStorage来解决这个问题 这是一些相关的值 :default-active="activePath" activePath: "", 绑定点击对象 <el-menu-item v-for="item in list" :key="item.id" :index="item.path"
解决element-ui框架下导航菜单el-menu 刷新后菜单高亮问题
Jayne_z的博客
02-28 1万+
element-ui + vue.js项目中，页面刷新后侧边导航失去高亮。 element-ui框架el-menu 组件提供一个默认高亮的属性:default-active=“”，页面刷新后可以获取页面的url ,进行处理，获得el-menu-item里面的index,然后赋值给default-active，这样就可以解决页面刷新后element-ui菜单组件高亮问题。具体实现可以看下面代码 ...
解决element-ui侧边导航在页面刷新后失去高亮的问题
littlebearGreat——宁静致远
07-06 8840
element-ui  +  vue.js项目中，页面刷新后侧边导航失去高亮。在此，解决此问题1. element-ui  提供一个属性 :default-active='activeNav' 来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题2.在页面刷新的时候，获取地址栏中的地址，再写一个地址与做导航的配置文件，得出default-active  的值即可。下面是我写的配置文件/...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
element-ui使用导航栏跳转路由的用法详解
10-18
Element UI提供了丰富的组件，包括导航栏（Menu），这些组件可以用来实现各种交互，比如页面之间的路由跳转。本文将深入探讨如何在Element UI的导航栏组件中实现跳转路由的功能。 首先，需要明确的是，Element UI的...
精选资源
ElementUI之首页导航及左侧菜单（模拟实现）
09-26
ElementUI是一款基于Vue.js的开源组件库，它提供了丰富的UI组件，能够帮助开发者快速搭建美观、响应式的界面。 首先，让我们了解ElementUI的基础。ElementUI是一套为开发者、设计师和产品经理准备的基于Vue2.0的...
element-ui+vue-router:实现导航栏跳转路由，完整的项目事例
最新发布
11-24
2. **导航栏组件 (`src/components/NavMenu.vue`)** ```vue <el-menu :router="true" :default-active="$route.path" mode="horizontal" > <el-menu-item index="/"> <i class="el-icon-s-home"> 首页 ...
Vue+Element-UI下刷新后高亮消失的解决办法
丁哒哒的博客
09-25 4154
问题描述 最近在做项目的时候遇到，页面刷新后路由不变、页面也不变，只是导航栏高亮消失的问题，查阅相关文档后，下面是我找到的解决办法之一。 代码 HTML部分： <el-menu :default-active="$route.path" background-color="#25569f" text-color="#fff" ...
element-ui 导航刷新高亮，进入子路由后保持高亮
weixin_42508745的博客
12-12 2731
<el-menu style="border-right:0" :default-active="$route.path" background-color="#fff" text-color="#717E8C" active-text-color="#18A590" router > </el-menu> 将default-a...
vue项目 使用Element-UI的NavMenu 遍历路由表生成导航菜单与点击页面路由时导航菜单失去高亮显示效果
幽冥雪羽的博客
11-04 5504
介绍：目前使用的路由表是三级路由表，文章中使用Element-UI动态生成导航栏可以有N级路由嵌套，但是事实上不会有那么多级路由，但是为了方便还是一次性写好，使用时就是复制文件就好 虚拟路由表: const RouterMap =[ { path: '/login', component: () => import('@/views/login'), hidden: true }, { ...
ElementUI导航菜单使用(并解决刷新会调回首页)
眾K的博客
11-25 3754
新桥 <el-menu :default-active="$route.path" //刷新绑定当前页面路径不会跳转 router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 @select="handleSelect" //菜单激活回调 unique-opened //是否只保持一个子菜...
element-ui饿了么框架中导航菜单中箭头方向问题
ss515896745的博客
03-23 3838
原文：https://blog.csdn.net/qq_39692256/article/details/82227990 这是饿了么默认导航样式（下、上） 然而大部分使用场景、用户习惯是下边这种箭头方向（右、下） element组件中没办法更改icon的值 采用覆盖element组件的css样式，或者直接更改依赖模块中的源码 源码： /*菜单打开*/.el-submenu.is-open...
Vue element UI顶部导航栏选中后高亮的实现方法
u013611978的博客
05-29 2098
在使用Vue开发前端项目中，我们经常使用顶部导航栏，本文讲解使用Element UI 的顶部导航栏nav_bar，并且顶部导航栏抽象为公共的子Vue模板，如何将顶部导航设置为选中高亮。 Vue项目结构如下： 解决办法参见原文：Vue 中顶部导航栏选中后高亮的实现方法 ...
element-ui NavMenu 导航菜单 通过一个按钮控制
Abudula__的博客
08-20 4366
element -ui 里导航菜单是通过两个按钮控制的，但实际开发中很多情况是通过一个按钮来toggle,而且有一个坑就是elemnt ui NavMenu的el-radio-butto 不是click事件，而是只能触发change事件。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /...
element-ui导航菜单刷新保持高亮
jqyy1996的博客
04-08 451
举例 <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > <el-menu-item index="my"> <i class="el-icon-setting"></i> <span slot
Element ui 导航栏 刷新时高亮
IT_iosers的博客
08-04 432
1、在组件中 <el-container> <el-aside> <el-row class="tac"> <el-col> <el-menu :default-active="$route.meta.parentpath" //重点class="menu" background-color="#344055"
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值