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

最新推荐文章于 2025-03-25 20:42:49 发布
原创 最新推荐文章于 2025-03-25 20:42:49 发布
· 1.3k 阅读 · 2 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

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

makerjack001
关注
el-menu+vue-router导航路由跳转
sinat_36227086的博客
08-20 1645
vue+elementui+vue-router使用el-menu实现导航路由跳转 1.element-ui.common.js:3383 TypeError: Cannot read property ‘push’ of undefined
el-menu和el-tabs联动+el-tabs重复请求踩坑
qq_33359745的博客
05-13 2461
通过使用el-menu和el-tabs联动来实现效果如下： 打了马赛克，大概说一下，左侧菜单栏，右侧标签页，点击标签页跳转不同的菜单 相关代码： // 数据注释 // 0.menuTitle 是菜单数据 因为有一级和二级菜单，形式为 obj:{level1:[{}],level2:[{}]} // 1.使用router 和 :default-active="$route.path" 自动识别路由，标记菜单项 // 2. isCollapse 通过个人需求实现是否折叠 // 3. 菜单项 绑定index为路
elementui el-menu router跳转方式传递参数
qq_41893334的博客
02-25 9372
最近再做一个后台管理项目，权限控制到用户可以操作的页面按钮，获取用户按钮需要菜单的moduleId，那么逻辑就是：在点击菜单的时候加载子页面并且把菜单的moduleId带过来 <el-menu class="el-menu-vertical-demo" background-color="#fff" text-color="#222" unique-opene
ElementUI el-menu导航开启vue-router模式
最新发布
Ba2213的博客
03-25 525
有没有小伙伴遇到这么一种情况：ElementUI el-menu导航中，开启vue-router 的模式后，点击触发事件而不进行路由跳转？这样去操作，就能完美解决问题！所以当你遇到同样的问题，不妨试试本文章中的方法哦！若对代码部分有疑问，也欢迎留言一起探讨！
el-menu菜单路由跳转时传参给组件
qq_43695425的博客
04-01 5769
使用el-menu菜单切换组件时，如果要携带参数，路由传参的方式是在el-menu-item中添加 :route去指定路由，包括参数 <el-menu-item index="/signStudent" :route="{name:'signStudent',query:{state:0}}"> <template slot="title"> <!--图标--> <i class="
element 导航栏el-menu router 页面传参
qq_40197100的博客
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菜单进行路由跳转，并传参
qq_46302247的博客
04-25 4840
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中使用el-menu和router-view实现菜单强同步
u012891980的博客
05-06 5330
1、问题背景： 父组件：一个框架页面，里面有菜单及网站总体框架； 子组件：一个菜单具体页面 在点击菜单进行路由跳转的这个过程中是你自定义了一些同步路由变量的逻辑代码，现在想想如果你略过这个菜单去发生路由跳转的时候，也就是说如果通过浏览器的返回操作，跳转到了之前的网页或者前进到下一个网页，如何做同步呢？该怎么同步这个菜单与页面呢？ 2、解决思路： 当然，想到的方法可能有1、浏览器AP...
（1）vue基于el-menu实现导航菜单简单封装
weixin_42283712的博客
09-10 2589
el-container布局 <template> <el-container class="l_container"> <el-aside width="200px"> <SideMenu/> </el-aside> <el-container> <el-header>Header</el-header> <el-main>Main&l
vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由
sunlizhen的专栏
12-10 2801
路由: const routes = [ { path: '/', name: 'Home', meta:{isLogin:true,title: 'Home'},// 添加该字段，表示进入这个路由是需要登录的 component: resolve=>(require(["@/views/index.vue"],resolve)), children: [ { path: '/monitor'.
vue3 el-menu页面跳转
01-05
2. 然后，在模板文件中引入`ElMenu`组件： ```html <el-menu :default-active="$route.path" class="menu"> <!-- 这里添加你的 menu 菜单选项 --> <el-menu-item :to="{ path: '/home' }">首页</el-menu-...
Element-UI中el-menu嵌入路由跳转
m0_62022586的博客
07-24 2498
首先我是用vue cli创建的项目，自定义中选了router路由、vuex等插件。handleSelect为点击切换时打印的路由日志，如无其他操作可不写。其中<router-view />标签的作用为展示配置的路由界面。传的index为路由路径，首页为默认进入时的页面。
vue路由传值
学思QAQ的博客
07-06 361
vue路由的理解
vue项目：使用ElementUI中的el-menu导航栏实现路由跳转，页面切换
weixin_52950296的博客
06-09 1万+
vue+elementUI 简单菜单跳转
通过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中router-view子组件与父组件传值(webpack)
包子的博客
11-06 3906
记录Vue中router-view子组件与父组件传值应用情况页面代码一、子组件传值给父组件二、父组件传值给子组件 应用情况 为了避免在vue项目中每页都配置导航菜单，所以直接在app.vue中配置了导航菜单，但是发现当前激活菜单的 index虽然能在第一次选中是高亮，但是刷新页面后又会显示选中默认的index，如下情况： 刷新后(同一请求路径)： 找了好多地方发现可以按照下面的方法解决，分两种情况： 页面代码 首先是app.vue的代码 <template> <div id="
vue3 setup函数中 解决 el-menu 重复点击 el-menu-item 路由不变参数改变但页面不刷新问题
2203_75707868的博客
05-25 602
以上是我的菜单栏代码，分类中是后台获取的数据 同时还有个问题是 当点击浏览器刷新时 默认选中的当前菜单会改变 页面不变 我想要的是 在浏览分类页面时刷新页面 也不会改变路由和页面 所以我将 每次点击的路由保存到cookie当中。以及用watch监听路由变化 再由nextTick，v-if=”isReload“控制组件的创建和销毁将路由刷新实现页面重新渲染。记住nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。
vue路由及参数router
nalanxiaoxiao2011的博客
01-09 5902
vue 路由route
el-menu动态加载路由，菜单的解决方案
lc257的博客
11-21 7917
动态从数据库加载路由，菜单
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值