解决elementUI中导航菜单（el-menu）页面刷新后的菜单选中问题

最新推荐文章于 2025-04-29 11:47:49 发布
最新推荐文章于 2025-04-29 11:47:49 发布
阅读量1.9k 收藏 4
点赞数
CC 4.0 BY-SA版权
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qw_cui/article/details/123998788
本文详细介绍了如何在Vue.js应用中启用路由，并在data和mounted阶段配置默认路由和相关方法。适合开发者快速入门前端路由管理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

直接上代码！！！

1.先启用路由--->:router="true"

2.然后在data函数中定义默认路由

3.然后在mounted钩子函数中添加方法

4.然后完成 

vue + ElementUI 点击页面内按钮跳转，导航栏选中问题
kellalove的专栏
04-24 5343
vue + ElementUI点击导航栏跳转页面是可以正常跳转高亮的，但通过页面内点击按钮跳转页面就会导致侧边栏不知道该选中哪个了（哪个处于高亮状态）？ （遇到了这个问题，也从网上搜了一些解决办法，结合自己的项目整合了下） 解决办法如下： 侧边栏代码如下： Sidebar.vue <template> <divclass="sidebar"> &...
vue+element多层级菜单el-menu循环递归展示并默认激活
周家大小姐
08-12 1875
代码 menu子组件 <template> <div class="menu-content"> <!-- <el-menu @close="handleClose" :default-active="'0-0'" ref="menus" :default-openeds="openeds" mode="vertical" > --> <el-menu ref="menus" :default-active=".
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui导航菜单跳转页面后，菜单选中项不对
qianduanVIP666的博客
08-03 1210
2.el-menu-item 标签 index绑定值=菜单跳转路由（index="/user"）1. el-menu 标签添加属性 :default-active="$route.path"1. 菜单跳转后，页面菜单的选中项与实际不符。2. 当前页面刷新后，菜单选中项与实际不符。
《Element Plus 基础知识》el-menu 使用方法open激活或打开默认菜单（小技巧）
最新发布
前端技术
04-29 480
【代码】《Element Plus 基础知识》el-menu 使用方法open激活或打开默认菜单（小技巧）
vue Element动态设置el-menu导航当前选中项
weixin_34007906的博客
04-25 4883
vue Element动态设置el-menu导航当前选中项 JavaScript dayaoge 6个月前 (10-20) 1351次浏览 Element UI 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。 官方文档给出了设置默认选中的属性。 Menu Attribute 参数说明类型可选值默认值 mode 模式 string horizont...
Element-Plus导航栏刷新高亮消失（解决）
Daisy_ls的博客
02-28 1711
element项目左侧导航栏里面的高亮，点击时都正常展示，一旦刷新页面，高亮就消失了，但是页面还是之前点击的页面。为了解决这个问题，试了网上说的所有方法，最后发现是少加了一个符号。
点击Element侧栏导航，顶栏导航的高亮背景效果不消失问题；以及解决刷新导航菜单栏高亮效果消失的问题
qq_39918566的博客
05-12 1348
一、问题描述 1）点击侧栏导航后，顶栏导航的高亮效果还在（问题图片如下，问题已解决）。 2）达到的目的：点击侧栏导航后顶栏导航的高亮背景消失；点击顶栏导航时侧栏导航的高亮效果消失。 二、实现过程 使用了Select（菜单激活回调），清空了左侧菜单栏的高亮样式。以下是部分代码，以顶栏导航的为例子，侧栏导航同理可实现。 1.HTML部分： <!-- 顶栏菜单 activeIndex是data里面的一个参数--> <el-menu router :default-acti
elementUI导航高亮问题
qq_36711388的博客
04-02 1585
问题1：当页面设置了标签点击跳转路由的时候，导航栏高亮和当前不一致，还是高亮原来的导航 解决方法：在菜单导航组件中监听路由变化 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#f...
Vue + el-menu刷新选中 + 路由监听 + 路由重复点击
假人一个的博客
09-08 4708
0. 整体代码：  【App.vue】 <template> <div id="app"> <HeaderPage :routerData="routerData"/> <br> <router-view v-if="isRouterAlice"/> </div> </template> <script> import HeaderPage from './components/
elementui组件中取消el-menu的选中状态
weixin_43822237的博客
04-19 9459
链接：https://www.jianshu.com/p/c2b6a6152ce9 // 折叠当前展开的菜单栏。 this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0]) // 取消菜单栏的当前选中状态。 this.$refs.elMenu.activeIndex = null 我的开发中有个需求是当前el-menu-item选中打开路由页面时是选中状态，在关闭当前打开的路由页面恢复导航栏el-menu-item未选中的
el-menu菜单中二级菜单
qq_40576178的博客
12-06 1861
<template> <div class="childComponent rectificationHiddenDangers"> <!-- 隐患整改 --> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="transparent" text-color=.
element-ui(vue2) 和element-plus(vue3) el-menu如何设置选中值
m0_73863692的博客
07-23 1034
用的vue2。
【element】element-ui/iview 3 设置菜单点击事件
jieweiwujie的博客
10-02 721
element el-menu选中后刷新页面 保持当前页选中状态且选中高亮
weixin_71160384的博客
12-01 1489
default-active属性代表当前激活菜单的 index，所以想让哪个页面作为项目一进来的首页，就写哪个页面的路径。一定要加上router属性，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，项目的需求是要有选中的背景色且去掉下边框。
element-plus中el-menu选择二级菜单，一级菜单同时高亮（不需要在style删除scoped也能生效！！！）
PhoenixGuangyu的博客
04-27 2967
【代码】element-plus中el-menu选择二级菜单，一级菜单同时高亮（不需要在style删除scoped也能生效！！！
elementui <el-menu :default-active="defaultMenu" class="el-menu-vertical-demo" @@open="handleOpen" @@close="handleClose" text-color="#fff" active-text-color="#ffd04b" :default-openeds="openeds"> <el-menu-item v-for="item in menuItems" :key="item.jcflbm" :style="{'padding-left':(lv_1)+'px'}" :index="item.jcflsx" @@click="handleMenuSelect(item.jcflbm)"> <i class="el-icon-caret-right"></i> <span>{{item.jcflmc}}</span>后台布局侧边栏菜单默认选中第一个
03-18
嗯，用户问的是如何在ElementUI的el-menu组件中设置默认选中的第一个菜单项。我需要先回想一下ElementUI的相关文档和常见做法。记得el-menu有一个default-active属性，用来指定当前激活的菜单项。通常这个属性绑定到...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值