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

最新推荐文章于 2024-04-30 17:04:58 发布

前端开发打怪升级ing

最新推荐文章于 2024-04-30 17:04:58 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qianduanVIP666/article/details/132088925

本文介绍了在Vue项目中，当使用ElementUI的el-menu组件进行页面跳转时，如何确保菜单选中项与实际页面路径匹配的问题及解决方案，只需设置default-active属性和menu-item的index值。

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

问题：

1. 菜单跳转后，页面菜单的选中项与实际不符
2. 当前页面刷新后，菜单选中项与实际不符

处理方法仅需两步：

1. el-menu 标签添加属性 :default-active="$route.path"

2.el-menu-item 标签 index绑定值=菜单跳转路由（index="/user"）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端开发打怪升级ing

关注关注

3
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Element-UI自学实践（一）

weixin_40017062的博客

08-13

517

Element-UI自学实践

解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法...

weixin_30679823的博客

11-29

2605

解决办法是给menu的default-active绑定route.path形如：<el-menu :default-active="$route.path" ...>每次渲染menu都会读当前path 设置为default-active 转载于:https://www.cnblogs.com/maoguy/p/7921826.html...

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

elementUI导航菜单中切换菜单项后页面跳转了但是选中菜单项不变或者与点击项不一致问题

jiangjunyuan168的博客

10-25

5910

菜单项是否选中就是看 default-active 绑定的值是哪个菜单项的 index 值，所以我们在路由跳转后将 default-active 绑定的值切换为当前菜单项的 index 值即可。将 index 值设置为菜单项的路由路径，点击后直接进行路由跳转，然后将 default-active 绑定为路由跳转完后的当前路由路径。比如下方中从博客切换到标签，正常情况下选中的菜单项应该是标签（标签高亮），但是现在选中的菜单项依旧是博客或者其他菜单项。

解决vue3 el-menu 刷新页面菜单选中项和路由不匹配

hzxOnlineOk的博客

10-15

2801

网上找到的方法有2种： 1、给el-menu组件增加属性 :default-active="this.$route.path" 但是博主试了下，打印出来的路由this.$route.path一直是/，放弃 2、通过this.$router.currentRoute console.log('当前路由', this.$router.currentRoute); 所以我们可以通过this.$router.currentRoute._value.fullPath访问到当前激活的url，然后将.

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

qw_cui的博客

04-06

1991

直接上代码！！！ 1.先启用路由--->:router="true" 2.然后在data函数中定义默认路由 3.然后在mounted钩子函数中添加方法 4.然后完成

解决element导航栏刷新，选中效果消失

weixin_51600020的博客

03-05

1010

1.添加:default-active="activeMenu"配置项。2.添加计算属性activeMenu值，每次点击后会自动计算当前路由位置。

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

10-16

`el-menu`是Element-UI中用于创建导航菜单的组件，它支持多种布局和交互方式。在实现刷新页面后保持选中状态，我们需要考虑以下几个关键点： 1. **`default-active`属性**：这个属性用于设置默认激活的菜单项，它的...

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

10-16

总的来说，Element-UI的NavMenu组件提供了一套完整的导航菜单解决方案，包括菜单项、子菜单、分组、自定义内容和事件处理等功能，可以帮助开发者快速构建出美观且功能完善的导航系统。通过灵活组合和配置，可以满足...

vue3使用element-plus搭建后台管理系统---菜单管理

07-01

4. **菜单渲染**：Element-Plus中的Menu组件可以用来创建可折叠、多级的导航菜单，根据获取的数据动态生成菜单结构。 5. **状态管理**：Vuex可以帮助管理全局状态，包括当前选中的菜单、展开的子菜单等。 6. **...

el-menu导航菜单在页面跳转时，选中项不会改变的问题

最新发布

weixin_43844730的博客

04-30

1175

菜单项是否选中其实是看default-active绑定的值是否与菜单项的index值一致，一致及判断为选中。那么将菜单项的index值绑定为路由的name，在default-active获取跳转路由的name即可（通过 $route 获取）。实现该功能，需要使用到ElementUI中导航菜单中的两个属性：select和default-active。例如tag标签点击跳转到“商品管理”页面，导航菜单的选中项也应该为商品管理。在点击ag标签进行页面跳转时，使el-menu中当前选中项跟着一起变化。

在使用element-ui el-submenu时页面被this.$router.push(“xxx“)跳转后，导航菜单标签未变化

六六的小帅的博客

06-05

941

解决elementui菜单组件不高亮问题

使用element-ui的＜el-menu＞循环＜el-menu-item＞不会默认选中

weixin_42947972的博客

04-15

3028

使用element-ui的<el-menu>循环<el-menu-item>不会默认选中问题代码: <template v-for="(menu, i) in menuInfo"> <el-menu-item :index="(i+1)"> <template slot="title"> &l

elementUI嵌套路由的导航栏在刷新页面的时候选中状态消失的解决

CongJiYong的博客

04-15

1632

嵌套路由在router.js里面设置meta路由元信息解决方法 { path: '/home', component: Home, redirect: '/sys', children: [ { path: '/sys', component: Sys ,meta:'/sys'}, { path: '/app', component: App, redirect:'/

el-menu显示点击的某项显示的indexPath不对

qq_40626218的博客

03-24

1308

问题描述：点击el-menu某一项后，我想实现这样一个效果：实现方式如下：显示路径是在父组件，左侧侧边栏是一个子组件。在 select 函数中（也就是选中某一项触发该函数），我通过$emit调用父组件中的函数，将indexPath传给父组件，然后父组件进行显示。但是出现了一个问题：当再点击某个目录时，路径就会发生变化：这就很神奇了，我明明只有在选中的时候才会触发父组件中的函数，给父组件中的indexPath赋值，而且点中某个目录的时候，也没有触发select函数，我...

vue elementui menu导航菜单根据路由变化选中对应项

hyupeng1006的博客

10-17

3290

1、刷新页面，导航菜单选中项恢复成默认设置 2、点击页面里的链接跳转到其它页面，但是导航菜单不会自动选中当前项

关于Element-ui左侧菜单栏刷新不保留当前状态问题

m0_56420453的博客

05-23

658

这个问题还是比较常见的,在开发项目中也是比较常用的废话不多说上代码（根据一些大牛然后缩减的，勿喷）第一步首先在 el-menu里有这么一个属性default-active 首先给他绑上一个变量如：第二步就是 el-menu-item里的index 绑定要跳转的路由页面如：第三步就是在 mounted里进行最后一步如第一步起的名字 active1 所以：解：最后一步的$route.name 你可以理解为就是你路由里的路由名称因为分为 path和name 我们在这只用nam...

element导航栏页面刷新内容没有跟随跳转

weixin_64463374的博客

01-16

852

解决思路：可以在代码中绑定一个事件函数，在函数方法中传入index参数，并且使用localStorage存储index，接着在生命周期函数created中把index赋值。给default-active绑定$route.path就可以快速实现 :default-active="$route.path"。点击其它导航，然后刷新页面，会发现导航栏刷新了回复到了默认。但是router-view(下面展现的内容)没有跟随改变。（此处我用来解决横向导航，但方法应该是通用的）2.解决思路：直接在。

element ui NavMenu 导航菜单页面刷新时菜单选中状态丢失解决方法

weixin_45261457的博客

04-22

3046

element ui NavMenu 导航菜单一般做为后台管理系统的切换菜单，在选中菜单跳转页面时会有高亮提示用户选择的哪一个菜单，但是会出现的问题是在跳转页面之后用户如果刷新页面选中的高亮状态就会丢失，这时候只需要在官方给出的例子中做出一点小小的修改就可以实现。官方提供： <el-menu-item index="1-1">选项1</el-menu-item> 修改后...

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

sunlizhen的专栏

12-10

2807

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

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

06-02

在element-ui的el-menu中，可以使用`router-link`来实现路由跳转，这样在切换路由时就可以保持当前选中的菜单项。具体实现步骤如下： 1. 在el-menu中使用`router-link`组件来实现路由跳转，如下所示： ``` <el-menu default-active="1" class="el-menu-vertical-demo" router> <router-link to="/home"> <el-menu-item index="1">首页</el-menu-item> </router-link> <router-link to="/about"> <el-menu-item index="2">关于我们</el-menu-item> </router-link> <router-link to="/contact"> <el-menu-item index="3">联系我们</el-menu-item> </router-link> </el-menu> ``` 2. 使用Vue Router的`router-link-active`指令来自动设置菜单项的选中状态，如下所示： ``` <el-menu default-active="1" class="el-menu-vertical-demo" router> <router-link to="/home" router-link-active="active"> <el-menu-item index="1">首页</el-menu-item> </router-link> <router-link to="/about" router-link-active="active"> <el-menu-item index="2">关于我们</el-menu-item> </router-link> <router-link to="/contact" router-link-active="active"> <el-menu-item index="3">联系我们</el-menu-item> </router-link> </el-menu> ``` 3. 在样式中定义`.active`类来设置选中状态的样式，如下所示： ``` .active { background-color: #409EFF !important; color: #fff !important; } ``` 这样就可以实现在el-menu中保持当前选中的菜单项，并在切换路由时自动更新选中状态。