vue渲染列表后点击跳转页面，传递参数渲染页面

最新推荐文章于 2024-08-15 13:48:12 发布
最新推荐文章于 2024-08-15 13:48:12 发布
阅读量1.7k 收藏 9
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vue vue专栏 文章标签： vue 路由传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/86615465
本文介绍了在Vue中如何从列表页面通过点击事件跳转到详情页面，并传递uuid参数进行页面渲染。在列表页，使用for循环结合点击事件将uuid通过query方式传递到URL。在详情页，可以通过`this.$route.query.uuid`在JS或HTML中直接获取并使用该参数。了解更多Vue技巧，可以查看相关专栏。

从列表页跳转到详情页，详情页通过从列表页获取的uuid参数进行渲染页面

1.列表页

html ：  for循环  上加点击事件传递uuid 参数

js ：toShops(uuids)  点击事件接收uuid   通过query 的方式传递，这个方式直接传递到url上面。刷新页面不影响

2.详情页（接收页面）

js ：  通过  this.$route.query.uuid  方式直接在js里获取，直接可以用！这里的uuid  指的是传递时的key 值

同时如果想在html页面上直接展示时直接  {{this.$route.query.uuid}}  获取

 

更多技巧请查看vue专栏   https://blog.youkuaiyun.com/qq_42221334/column/info/27230/1

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue 事件参数传递
洋洋洒洒做开发的专栏
08-17 5785
Vue 事件参数传递 原文链接：https://blog.learnzs.com/2019/08/17/223/ vue绑定事件的有时候需要传递很多参数，在此整理几种传递方式 1. 默认传参 <zs-input @change="handleChange($event)"></zs-input> 或(第一个参数会默认传进去) <zs-input @change="handleChange"></zs-input> 使用： handleChange(ev
基于vue循环列表时点击跳转页面的方法
10-18
今天小编就为大家分享一篇基于vue循环列表时点击跳转页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3列表（List）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
08-15 2418
通用列表，支持：是否显示分割线；是否显示边框；三种尺寸；加载中；暂无数据；显示悬浮样式；列表添加操作项；自定义样式；竖排分页列表；总之；功能丰富，简单易用😁😁
vue 列表页面的分页
qq_42180156的博客
10-29 648
/** * @param {Object} isLoad 是否翻页 */ getHelpList(isLoad) { if (isLoad){ //如果是翻页 if (this.pageNo * this.pageSize <= this.helpList.length) { //如果当前列表满足整页，说明可能有下一页存在 this.pageNo += 1 } else { //如果不满足整页，说明没有..
vue事件传递参数
souwer的博客
05-06 3411
vue事件传递参数
Vue.js实战之利用vue-router实现跳转页面
10-20
Vue.js实战中使用vue-router实现页面跳转是单页应用开发的核心技术之一。单页应用（SPA）的特点是只有一个HTML页面，通过动态改变视图而不重新加载页面来提供用户体验。而vue-router是Vue.js官方提供的路由管理器，...
vue实现未登录跳转到登录页面的方法
10-18
// 如果没有token，跳转到登录页面，并将目标路由地址作为参数传递 next({ path: '/', query: { redirect: to.fullPath } }) } } else { // 如果不需要登录权限，则直接进入目标路由 next(); } }); ``` ...
vue动态渲染svg、添加点击事件的实现
10-15
当我们在Vue项目中需要动态渲染SVG以及为SVG图形添加交互功能时，如点击事件，我们需要了解如何结合这两个技术。接下来，我们将详细介绍Vue动态渲染SVG以及为SVG添加点击事件的实现过程。 ### Vue动态渲染SVG 在...
vue 事件调用 传参_Vue 事件如何传递参数？
weixin_35679869的博客
02-22 3617
Vue 事件如何传递参数？事件函数参数传递：普通参数和事件对象传递格式如下：调用函数传参 点秋香vue事件绑定-参数传递实例如下：vue事件绑定-参数传递 xinbiancheng.cn{{ num }} 直接绑定函数名称 点秋香 调用函数传参 点秋香 /*vue事件绑定-参数传递1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数2、如果事件绑定函数调用，那么事件对象必须...
vue 点击事件传参写法
qq_40295815的博客
12-05 2622
on-click={()=>this.handleInfo(warn)}
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue事件参数
qq_51856496的博客
07-06 646
对象和通过事件传递数据。目的：点击事件进行传参。
vue中如何进行传递参数?
alive_new的博客
08-21 2013
通过`methods续写：在组件中，通过methods选项定义updateMessage方法，当按钮被点击时，调用this.$store.commit来触发名为updateMessage的mutation，从而更新Vuex中的message状态。在父组件中，通过@或v-on指令监听子组件触发的customEvent事件，并在事件处理函数中获取传递的数据。在组件中，通过computed属性将Vuex中的message状态映射为组件的计算属性，以便在模板中进行显示。事件是一种允许子组件向父组件传递消息的机制。
前端Vue（二）——Vue事件的基本使用、Vue事件的参数传递、购物车数字增减小案例、v-show、v-if、v-bind
qq_41824825的博客
02-13 785
前端Vue（二） Vue中事件的定义与使用 Vue的事件使用 1、事件的基本语法和使用 假设现在页面上有个按钮，怎么使点击就能让某个数值增加？ 先来看下思路： 首先，先绑定事件，在想要绑定的标签上加上 v-on : 事件名字=“函数” （在js中的事件这里同样支持，不过稍有不同）： 事件统一定义在一个地方： methods：{ xxx } 这时候测试可以发现成功触发。 接着继续： 可以通过 this 这个关键字，取到vue的实例： 来看下控制台： 可以看到拿得到。 在事件函数中this就是
vue列表进入详情页面返回时数据缓存
yanby921005的博客
05-18 6100
1.在app.vue中添加 2.在router.index中添加 3.在列表页面添加
VUE-列表
别追我我有止咳糖浆
04-18 608
如下例子。
『VUE』09. 事件传参（详细图文注释）
MZH
04-03 2086
『VUE』09. 事件传参（详细图文注释）
vue中如何实现跳转页面时传递参数过去
weixin_50240716的博客
12-07 822
一、配置路由时动态绑定路由 二、跳转到detail页面时，获取这个id 通过$route.params.id来获取跳转时传递过来的参数 $route：当前哪个路由处于活跃状态，拿到的就是哪个路由
vue - ＜a＞标签路由传参-接收参数
jieweiwujie的博客
11-03 800
vue 页面跳转传递对象参数
最新发布
02-07
### 实现 Vue 中页面跳转时传递对象参数 在 Vue.js 应用程序中，可以通过多种方式实现在页面跳转时传递对象参数。主要的方式有： #### 1. 使用查询参数 (Query Parameters) 当需要传递的对象不是特别大且不需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值