记录有个vue 使用 el-menu + route-view 跳转 传递参数的方法

最新推荐文章于 2026-04-24 10:04:36 发布
原创 最新推荐文章于 2026-04-24 10:04:36 发布 · 1.4k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在Vue2结合ElementUI的项目开发中，使用el-menu配置路由并结合router/index.js设置父子路由，通常能实现自动跳转。然而，当需要在不同页面间传递参数时，这种方法变得不适用。由于不能在route-view内绑定属性传参，作者采取了手动路由的方法：取消el-menu的router属性，添加选择事件监听，并在事件处理函数中手动配置路由参数，以此实现参数传递。

在实际开发中，
el-menu 配置router + router/index.js 中配置父子路由 + el-main 设置 router-view 标签
可以很好的进行自动路由跳转
但当不同页面需要进行传递参数时，这种自动路由很难帮我们传递参数，我 vue2 + element UI 2.4版本无法使用 route-view 标签内绑定属性传参
故使用手动路由
1、 去除 el-menu 的router属性+绑定选择事件
在这里插入图片描述
2、 对选择事件（函数）进行手动配置路由参数
在这里插入图片描述

标签
#vue.js #javascript #前端
makerjack001
关注
组合导航（八）：INS/GPS组合导航
热门推荐
weixin_43793960的博客
05-14 3万+
INS/GPS组合导航1 误差反馈1.1 开环INS/GPS架构1.2 闭环INS/GPS架构2 组合导航的类型2.1 松耦合 的INS/GPS组合导航2.2 紧耦合 的INS/GPS组合导航2.3 深度耦合的 INS/GPS组合导航3 INS方程的动态误差模型4 松耦合的INS/GPS组合导航模型4.1 系统模型4.2 测量模型4.3 INS/GPS松耦合总框图5 紧耦合的INS/GPS组合导航模型5.1 系统模型5.2 测量模型 INS/GPS组合导航 对比INS与GPS导航方法，二者都有其各自的优.
AUTOSAR实战：手把手教你配置EthTsync模块，搞定车载以太网时间同步
最新发布
weixin_28736335的博客
04-24 343
本文详细解析AUTOSAR架构中EthTsync模块的配置方法，实现车载以太网时间同步。通过对比gPTP与PTP协议差异，提供从开发环境准备到参数配置、模块集成的全流程指南，并分享性能优化与调试技巧，帮助开发者实现微秒级同步精度，满足自动驾驶等高精度时间同步需求。
vue3+layui - 详细实现“无限级导航菜单+选项卡路由+面包屑“功能，vue3使用layui菜单实现后台管理系统动态菜单及面包屑tag导航栏效果，侧边动态导航栏多级嵌套菜单，后端接口获取渲染！
✅ 精选推荐文章
07-28 3182
vue3，layui，菜单路由导航，路由，router，后台管理系统，layui实现导航菜单，嵌套，多级，children，面包屑，tag路由标签，路由数据从后端服务器api接口获取并显示，自动根据路由匹配标题，lay-menu，vue3-layui项目左侧导航菜单栏，vue3使用layui组件做路由导航菜单示例代码，手风琴，标签导航栏，左侧菜单，不显示，报错，Layui动态生成导航菜单子菜单不显示，动态导航，子菜单，LayUI导航栏二级菜单，无限级左侧导航实现，基于vue3实现layui无限级导航，动态侧
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 9558
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
Element-UI中el-menu嵌入路由跳转
m0_62022586的博客
07-24 2610
首先我是用vue cli创建的项目，自定义中选了router路由、vuex等插件。handleSelect为点击切换时打印的路由日志，如无其他操作可不写。其中<router-view />标签的作用为展示配置的路由界面。传的index为路由路径，首页为默认进入时的页面。
通过element-ui中menu和router的绑定，实现页面跳转
gao_jun1的博客
09-05 2万+
一、项目描述 通过Vue创建了一个前端项目，项目中导入了element-ui组件，项目中我创建了四个独立的vue界面（分别是：PageOne.vue、PageTwo.vue、PageThree.vue、PageFour.vue）；其次，使用element-ui创建了两个导航栏（其中包含四个页面：页面1、页面2、页面3、页面4）。需要实现的功能为：点击页面1、2、3、4，实现PageOne.vue到PageFour.vue的跳转。 项目结构如下： 二、通过menu和router的绑定实现上述功能 .
vue中使用el-menu和router-view实现菜单强同步
u012891980的博客
05-06 5407
1、问题背景： 父组件：一个框架页面，里面有菜单及网站总体框架； 子组件：一个菜单具体页面 在点击菜单进行路由跳转的这个过程中是你自定义了一些同步路由变量的逻辑代码，现在想想如果你略过这个菜单去发生路由跳转的时候，也就是说如果通过浏览器的返回操作，跳转到了之前的网页或者前进到下一个网页，如何做同步呢？该怎么同步这个菜单与页面呢？ 2、解决思路： 当然，想到的方法可能有1、浏览器AP...
element 导航栏el-menu router 页面传参
只要微微辣的博客
12-23 1万+
element 的el-menu（导航栏）组件中自带一个vue-router 的模式那就是在标签中加router，再在el-menu-item中添加 index（路径地址）唯一标志来实现跳转如下： <el-menu style="border-bottom:0;" class="el-menu-demo flex" mode="horizontal" text-col..
el-menu+vue-router导航路由跳转
sinat_36227086的博客
08-20 1736
vue+elementui+vue-router使用el-menu实现导航路由跳转 1.element-ui.common.js:3383 TypeError: Cannot read property ‘push’ of undefined
el-menu动态加载路由，菜单的解决方案
lc257的博客
11-21 8302
动态从数据库加载路由，菜单
el-menu菜单路由跳转时传参给组件
qq_43695425的博客
04-01 5995
使用el-menu菜单切换组件时，如果要携带参数，路由传参的方式是在el-menu-item中添加 :route去指定路由，包括参数 <el-menu-item index="/signStudent" :route="{name:'signStudent',query:{state:0}}"> <template slot="title"> <!--图标--> <i class="
el-menu跳转路由
高电平的博客
01-06 5692
首先添加:default-active属性，属性值为this.$router.path，同时还需要设置router为true（router默认值为ture，直接添加router即可）最后在el-menu-item中的index属性值设为对应的路径。接着在路由中配置好组件路径。
超详细的vue结合ElementUI实现头部导航栏进行页面跳转
qq_48961214的博客
04-24 1万+
vue中实现顶部栏路由跳转
element-ui+vue-router:实现导航栏跳转路由
nahedan的博客
10-27 1万+
在实际开发中我们常常遇到在单页面中点击导航栏菜单中的某一选项卡，页面中的某个部分出现相关的信息，也就是使用导航栏进行路由跳转。如下图所示（在线格式转换）。 ### 示例 <el-menu :default-openeds="['1', '3']" :default-active="this.$route.path" router > <div class="icon"> <i class="el-icon-im
el-menu菜单进行路由跳转，并传参
qq_46302247的博客
04-25 4961
1、只进行跳转（无需传参） <el-menu :default-active="$router.path" //注意点 router //注意点 class="el-menu-demo" mode="horizontal" > <el-menu-item "index='/yzfMap'>地图页面</el-menu-item> </el-munu> 2、跳转并传参 <el-menu default-active="1
vue element UI 学习总结笔记（九）_ 导航菜单与路由
wh_xia_jun的专栏
05-29 6718
获取用户信息 我们把login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息。 router.beforeEach((to, from, next) => { if (!(store.getters.savestate === 0)) { Message({ showClose: true, message: '正在编辑状态中,请先保存', type: 'error' }) next(false) .
element ui实现动态侧边菜单栏以及页面布局
zhanglinsen123的博客
07-17 1万+
element ui实现动态侧边菜单栏以及页面布局
Vue el-menu-item路由跳转
m0_57855884的博客
09-22 1910
Vue el-menu-item路由跳转
今日问题：Vue++ElementUI --- 导航栏路由跳转方法
weixin_52053631的博客
04-15 2122
【代码】今日问题：Vue++ElementUI --- 导航栏路由跳转方法。
el-menu+vue-router路由配置
zhouwei922的博客
10-25 4877
继续后台管理系统的开发，遇到路由跳转的问题了，百度了一下，然后又参考了现有的项目，相关配置如下： router.js文件： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const routes = [ { path: '/', redirect: '/dashboard' }, { path: '/', component: ()=> import("@/
vue 笔记（十六） 参数传递及重定向
孤注一掷的博客
06-03 1302
接着上一个工程写带有参数请求的路由跳转 1.主页面传递参数 <el-menu-item index="1-1"> <!--插入的地方--> <router-link :to="{name:'UserProfile',params:{ id:1,name:'swk'}}">个人信息</router-link> </el-menu-item>
安全光幕直线扫描红外发射器/接收器，附全套资料-电路方案
安全光幕也就是光电安全保护装置（也称安全保护器、冲床保护器、红外线安全保护装置等）。主要应用在人与机器协同工作，在一些具有潜在危险的机械设备上，如冲压机械、剪切设备、金属切削设备、自动化装配线等，用于保护作业人员的安全。现在的安全光幕产品主要分为直线扫描方式和交叉扫描方式两种，本设计采用了直线扫描方式。安全光幕通常由红外发射器和红外接收器两部分组成。安全光幕主要技术参数如下:电源: 直流24V保护高度: 140mm检测距离: 1~2000mm（通过配置参数可调节测试距离）光束数量: 8光轴间距: 20mm分辨率: 15mm响应时间: 10ms输出类型: NPN安全光幕红外发射器电路板正面如图:安全光幕红外接收器电路板正面如图:安全光幕原理介绍:安全光幕由红外发射装置、红外接收装置以及以MCU 为核心的电子电路组成。光幕的发送端等间距安装有多个红外发射管，接收端相应的有相同数量同样排列的红外接收管，每一个红外发射管都对应有一个红外接收管，且安装在同一水平线上。当同一水平线上的红外发射管、红外接收管之间没有障碍物时，红外发射管发出的红外光调制信号能顺利到达红外接收管。而在有障碍物的情况下，红外发射管发出的红外光调制信号则不能顺利到达红外接收管，这时该红外接收管接收不到红外光调制信号，相应的输出到外部继电器的控制信号输出有效电平，控制设备停止或断电，从而达到保护的目的。安全光幕探测原理如图所示。红色线条代表红外线，红色线条覆盖区域是被保护的区域。左图是保护区域内无物体的情况，右图是保护区域内有物体的情况。更多详细说明，详见附件内容，附件内容截图:
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值