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

最新推荐文章于 2024-07-23 10:14:02 发布

原创最新推荐文章于 2024-07-23 10:14:02 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

本文详细介绍了如何在Vue.js应用中启用路由，并在data和mounted阶段配置默认路由和相关方法。适合开发者快速入门前端路由管理。

直接上代码！！！

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

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

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

4.然后完成

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端劝退大师

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

点击Element侧栏导航，顶栏导航的高亮背景效果不消失问题；以及解决刷新导航菜单栏高亮效果消失的问题

qq_39918566的博客

05-12

1383

一、问题描述 1）点击侧栏导航后，顶栏导航的高亮效果还在（问题图片如下，问题已解决）。 2）达到的目的：点击侧栏导航后顶栏导航的高亮背景消失；点击顶栏导航时侧栏导航的高亮效果消失。二、实现过程使用了Select（菜单激活回调），清空了左侧菜单栏的高亮样式。以下是部分代码，以顶栏导航的为例子，侧栏导航同理可实现。 1.HTML部分：  <el-menu router :default-acti

elementUI导航高亮问题

qq_36711388的博客

04-02

1614

问题1：当页面设置了标签点击跳转路由的时候，导航栏高亮和当前不一致，还是高亮原来的导航解决方法：在菜单导航组件中监听路由变化 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#f...

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

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

10-16

主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

element-ui导航菜单跳转页面后，菜单选中项不对

qianduanVIP666的博客

08-03

1268

2.el-menu-item 标签 index绑定值=菜单跳转路由（index="/user"）1. el-menu 标签添加属性 :default-active="$route.path"1. 菜单跳转后，页面菜单的选中项与实际不符。2. 当前页面刷新后，菜单选中项与实际不符。

vue Element动态设置el-menu导航当前选中项

weixin_34007906的博客

04-25

4921

vue Element动态设置el-menu导航当前选中项 JavaScript dayaoge 6个月前 (10-20) 1351次浏览 Element UI 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。官方文档给出了设置默认选中的属性。 Menu Attribute 参数说明类型可选值默认值 mode 模式 string horizont...

vue + ElementUI 点击页面内按钮跳转，导航栏选中问题

kellalove的专栏

04-24

5380

vue + ElementUI点击导航栏跳转页面是可以正常跳转高亮的，但通过页面内点击按钮跳转页面就会导致侧边栏不知道该选中哪个了（哪个处于高亮状态）？（遇到了这个问题，也从网上搜了一些解决办法，结合自己的项目整合了下）解决办法如下：侧边栏代码如下： Sidebar.vue <template> <divclass="sidebar"> &...

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属性，用来指定当前激活的菜单项。通常这个属性绑定到...

Vue + elementUI使用中总结，包括踩坑（更新中）

是日前端

11-11

2808

<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem

Vue + el-menu刷新选中 + 路由监听 + 路由重复点击

假人一个的博客

09-08

4751

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

9653

链接：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

1901

<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

1187

用的vue2。

【element】element-ui/iview 3 设置菜单点击事件

jieweiwujie的博客

10-02

743

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

weixin_71160384的博客

12-01

1601

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

element-plus中el-menu选择二级菜单，一级菜单同时高亮（不需要在style删除scoped也能生效！！！）

PhoenixGuangyu的博客

04-27

3081

【代码】element-plus中el-menu选择二级菜单，一级菜单同时高亮（不需要在style删除scoped也能生效！！！

elementui下拉菜单el-dropdown-menu组件loading效果

11-02

Element UI 的下拉菜单 `el-dropdown-menu` 组件本身并不直接提供内置的 loading 效果，它主要用于显示一组可选项供用户选择。如果你想要在下拉菜单打开时显示加载状态，通常需要自定义一些逻辑或者结合第三方库（如...