el-menu-item 导航栏不跳转自己遇到的问题

最新推荐文章于 2024-07-04 14:11:39 发布

猴猴不是猴

最新推荐文章于 2024-07-04 14:11:39 发布

阅读量2.6k

点赞数 1

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_56381842/article/details/128247280

版权

首先el-menu内需要加 router

:default-active="$route.path"

el-menu-item index="/news"

路由配置：

都配置正确之后发现路由依然不能跳转，检查后发现news页面中name后边的名称没有加引号，报错为为定义

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

猴猴不是猴

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
el-menu-item 导航栏不跳转自己遇到的问题

el-menu-item 导航栏不跳转自己遇到的问题
复制链接

扫一扫

使用el-menu做侧边栏导航遇到需要点击两次菜单才展开

qq_37635012的博客

06-27

1710

如上图，在我第一次点击选中“告警管理”这个菜单的时候，外联监测它会立马收缩起来，当我第二次点击时就不会收缩，而是展开状态，这是因为我的el-menu里default-active和el-submenu的index及el-menu-item的index属性不一致导致的，

使用elementUI中的el-menu实现理由的跳转

weixin_44986077的博客

09-03

2827

使用elementUI中的el-menu实现理由的跳转今天突然要改一个需求说是在整个页面的底部加一个固定定位，进行页面的跳转，想了一下直接打开了熟悉的elementUI的官方文档首先把官网中的内容进行CV大法进行有效的粘贴,根据自己的实际情况进行调整，效果（点击不同的出现不同的页面） HTML代码 <el-menu :default-active="th...

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

element-ui使用导航栏跳转路由的用法详解

10-18

今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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

sunlizhen的专栏

12-10

2369

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

【Vue3】el-menu的踩坑和使用

热门推荐

weixin_45917610的博客

10-20

1万+

原本界面:我出现的点击首页没有跳转，而点击其他的就跳转原本的代码：下面展示一些内联代码片。 <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-menu-item index="/

使用vue-admin后台的时候，premission.js文件不生效以及el-menu点击路由不跳转问题

weixin_52379846的博客

03-24

440

这里当时在配置后台框架的时候，不小心注释了，解开就行。

element-plus导航不跳转的解决办法

walkertc的博客

03-19

1180

之后发现点击并没有什么变化，这是因为没有将属性。即可实现跳转（当然你得先配置好路由）

vue3 +el-menu实现路由跳转失败

weixin_44591656的博客

01-27

2883

vue3 +el-menu实现路由跳转失败解决办法：要在标签中加 router属性<el-menu router> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu router>

《前端》el-menu导航栏实现方法--2021年1月3日

BelleDiao的博客

01-03

744

项目场景和问题描述：之前做的全供应链看板，不同页面是用页签实现的。现在领导要求用导航栏的方式展现。我当时觉得手册有案例应该很简单，但是，把自己????了，做导航栏很简单，但不同页面怎么跳转呢？网上查别人博文都是用router，但是我怎么都不成功。原因分析：后来可利说，我这是在html文件中，不能使用vue-router。等今年我要学会webpack打包项目的那种方式。现在先使用html能支持的方式来实现。两种解决方案：我能实现到的地方-实现不了点击导航栏在右侧出页面内容 <body>

element-ui 导航菜单路由跳转无效

A873054267的博客

10-23

5757

两个原因 1 el-menu未开启router模式 2 没有在菜单中绑定index

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

jiangjunyuan168的博客

10-25

5586

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

element-ui中el-menu在特定条件下点击菜单项不切换页面禁止选中

weixin_43443339的博客

06-19

401

然后设置下图defaultActive&activeIndex即可。

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

qianduanVIP666的博客

08-03

1002

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

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

weixin_43844730的博客

04-30

676

菜单项是否选中其实是看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

761

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

用vue 和ElementUI的el-menu设置跳转页面时的坑

weixin_42968194的博客

09-08

4056

先上代码 <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">

element-ui中NavMenu导航菜单路由跳转时无法切换菜单状态

太极梦龙的博客

11-19

5783

问题说明使用element-ui的NavMenu导航菜单时发现一个问题,当在二级页面通过事件使用$router.push('/article')方法切回到article页面时,导航菜单无法正确显示当前页面的菜单项,还依旧停留在上个页面问题解决: 从官网发现,该属性可以解决这个问题在el-menu标签中添加该属性,并绑定该属性值为跳转页面的哈希值,从而实现当前页面的菜单激活 ok,问题...

el-menu-item 跳转

08-13

el-menu-item跳转是通过在el-menu-item标签中设置index属性来实现的。当点击该el-menu-item时，会触发路由跳转到对应的页面。例如，可以在el-menu标签中添加router属性来启用路由功能，并在每个el-menu-item标签内设置index属性来指定跳转的路径。然后，在路由配置中添加对应的路径映射，使得点击el-menu-item时能够正确跳转到目标页面。具体代码如下所示： ``` <el-menu :router="true"> <el-menu-item index="/home">首页</el-menu-item> <el-menu-item index="/about">关于</el-menu-item> <el-menu-item index="/contact">联系我们</el-menu-item> </el-menu> ``` 在这个例子中，当点击首页(el-menu-item)时，会触发路由跳转到"/home"路径对应的页面。同理，点击其他el-menu-item也会跳转到相应的路径。123 #### 引用[.reference_title] - *1* *2* [el-menu实现路由跳转及当前页的导航](https://blog.csdn.net/weixin_55560445/article/details/114419957)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue使用elementui导航栏实现页面间跳转（路由跳转）](https://blog.csdn.net/big_pig_sir/article/details/125797455)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]