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

最新推荐文章于 2024-07-04 14:11:39 发布
最新推荐文章于 2024-07-04 14:11:39 发布
阅读量2.6k 收藏
点赞数 1
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56381842/article/details/128247280
版权

首先el-menu内需要加 router

:default-active="$route.path"

el-menu-item index="/news"

路由配置：

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

 

猴猴不是猴
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui使用导航栏跳转路由的用法详解
10-18
今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于element-plus中el-menu或者el-menu-item导致无法跳转问题或者无法路由或闪动问题解决方法
weixin_45917610的博客
10-20 1万+
原本界面:我出现的点击首页没有跳转，而点击其他的就跳转 原本的代码： 下面展示一些 内联代码片。 <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-menu-item index="/
【Vue3】el-menu的踩坑和使用
最新发布
小安驾到的博客
07-04 1743
el-menu一些小技巧，满足更多少见需求！
el-menu跳转路由
高电平的博客
01-06 4881
首先添加:default-active属性，属性值为this.$router.path，同时还需要设置router为true（router默认值为ture，直接添加router即可）最后在el-menu-item中的index属性值设为对应的路径。接着在路由中配置好组件路径。
element-plus导航不跳转的解决办法
walkertc的博客
03-19 1180
之后发现点击并没有什么变化，这是因为没有将属性。即可实现跳转（当然你得先配置好路由）
element-ui导航菜单跳转页面后，菜单选中项不对
qianduanVIP666的博客
08-03 1002
2.el-menu-item 标签 index绑定值=菜单跳转路由（index="/user"）1. el-menu 标签添加属性 :default-active="$route.path"1. 菜单跳转后，页面菜单的选中项与实际不符。2. 当前页面刷新后，菜单选中项与实际不符。
Vue el-menu-item实现路由跳转
热门推荐
weixin_62355341的博客
04-14 2万+
场景：用了element-ui的el-menu 菜单 怎样实现路由跳转呢？ 1，在el-menu加上router，添加el-menu的default-active属性，加：动态绑定，值设置为"this.$router.path" ， 2，将el-menu-item的index设置为路由跳转path，和route.js相对应 代码： <el-menu router :default-active="this.$router.path" class="...
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
如果需要在菜单项中嵌入链接，可以直接使用`<a>`标签，如`<el-menu-item index="4">订单管理</a></el-menu-item>`，这样点击菜单项就会跳转到指定URL。 总的来说，Element-UI的NavMenu组件提供了一套完整的导航...
vue elementUI使用tabs与导航栏联动
10-16
- `el-menu-item`：表示菜单中的一个基本项。 - `el-tabs`：表示一个标签页容器，可以包含多个标签页内容。 - `el-tab-pane`：表示标签页内容区域。 要实现导航栏与tabs的联动，核心思路在于维护一个响应式的tabs...
详解Nuxt内导航栏的两种实现方式
10-15
在这个组件中，可以使用Element UI的`<el-menu>`组件创建水平导航栏，并通过`@click`事件和`$router.push()`方法处理路由跳转。 ```html <div id="nav-wrapper"> <el-menu :default-active="activeIndex" ...
Vue el-menu-item路由跳转
m0_57855884的博客
09-22 1692
Vue el-menu-item路由跳转
【Vue】Router路由无法跳转问题整理
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面
weixin_44990895的博客
05-13 1万+
【代码】element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面。
使用vue-admin后台的时候，premission.js文件不生效以及el-menu点击路由不跳转问题
weixin_52379846的博客
03-24 440
这里当时在配置后台框架的时候，不小心注释了，解开就行。
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>
vue项目：使用ElementUI中的el-menu导航栏实现路由跳转，页面切换
weixin_52950296的博客
06-09 1万+
vue+elementUI 简单菜单跳转
Element-UI中el-menu嵌入路由跳转
m0_62022586的博客
07-24 2229
首先我是用vue cli创建的项目，自定义中选了router路由、vuex等插件。handleSelect为点击切换时打印的路由日志，如无其他操作可不写。其中<router-view />标签的作用为展示配置的路由界面。传的index为路由路径，首页为默认进入时的页面。
使用elementUI通过NavMenu 导航菜单实现页面跳转
qq_63026743的博客
07-28 3558
1. 在el-menu中加入 :default-active="$route.path" 和 router。2. 在index 中添加路由跳转路径。
elementUI导航菜单中切换菜单项后页面跳转了但是选中菜单项不变或者与点击项不一致问题
jiangjunyuan168的博客
10-25 5590
菜单项是否选中就是看 default-active 绑定的值是哪个菜单项的 index 值，所以我们在路由跳转后将 default-active 绑定的值切换为当前菜单项的 index 值即可。将 index 值设置为菜单项的路由路径，点击后直接进行路由跳转，然后将 default-active 绑定为路由跳转完后的当前路由路径。比如下方中从博客切换到标签，正常情况下选中的菜单项应该是标签（标签高亮），但是现在选中的菜单项依旧是博客或者其他菜单项。
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也会跳转到相应的路径。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.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 ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值