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

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

从列表页跳转到详情页，详情页通过从列表页获取的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.csdn.net/qq_42221334/column/info/27230/1

就像风1样
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 事件参数传递
洋洋洒洒做开发的专栏
08-17 5643
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.js实战之利用vue-router实现跳转页面
10-20
对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
基于vue循环列表时点击跳转页面的方法
10-18
今天小编就为大家分享一篇基于vue循环列表时点击跳转页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 组件渲染流程详解
My_wife_QBL的博客
07-04 919
Vue 组件的渲染流程包括初始化阶段、模板编译阶段、挂载阶段、更新阶段和销毁阶段。每个阶段都有相应的生命周期钩子，允许我们在组件的不同阶段执行自定义逻辑。通过理解这一流程，我们可以更好地掌握 Vue 的工作原理，并在实际开发中进行性能优化和调试。希望本文能够帮助你全面理解 Vue 组件的渲染流程，并在实际开发中发挥其最大的价值。
Vue3列表（List）
最新发布
Mr Dear的博客
08-15 1004
通用列表，支持：是否显示分割线；是否显示边框；三种尺寸；加载中；暂无数据；显示悬浮样式；列表添加操作项；自定义样式；竖排分页列表；总之；功能丰富，简单易用😁😁
vue 列表页面的分页
qq_42180156的博客
10-29 580
/** * @param {Object} isLoad 是否翻页 */ getHelpList(isLoad) { if (isLoad){ //如果是翻页 if (this.pageNo * this.pageSize <= this.helpList.length) { //如果当前列表满足整页，说明可能有下一页存在 this.pageNo += 1 } else { //如果不满足整页，说明没有..
vue事件传递参数
souwer的博客
05-06 3308
vue事件传递参数
vue实现未登录跳转到登录页面的方法
10-18
// 如果没有token，跳转到登录页面，并将目标路由地址作为参数传递 next({ path: '/', query: { redirect: to.fullPath } }) } } else { // 如果不需要登录权限，则直接进入目标路由 next(); } }); ``` ...
vue跳转页面的几种方法(推荐)
10-15
当页面通过路由跳转到达后，我们通常需要获取路由中传递的参数。在目标组件中，可以通过this.$route对象访问当前路由的信息。接收params参数时应使用params属性，接收query参数时应使用query属性，例如： ```html ...
vue 事件调用 传参_Vue 事件如何传递参数？
weixin_35679869的博客
02-22 3518
Vue 事件如何传递参数？事件函数参数传递：普通参数和事件对象传递格式如下：调用函数传参 点秋香vue事件绑定-参数传递实例如下：vue事件绑定-参数传递 xinbiancheng.cn{{ num }} 直接绑定函数名称 点秋香 调用函数传参 点秋香 /*vue事件绑定-参数传递1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数2、如果事件绑定函数调用，那么事件对象必须...
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 点击事件传参写法
qq_40295815的博客
12-05 2566
on-click={()=>this.handleInfo(warn)}
vue中如何进行传递参数?
alive_new的博客
08-21 1615
通过`methods续写：在组件中，通过methods选项定义updateMessage方法，当按钮被点击时，调用this.$store.commit来触发名为updateMessage的mutation，从而更新Vuex中的message状态。在父组件中，通过@或v-on指令监听子组件触发的customEvent事件，并在事件处理函数中获取传递的数据。在组件中，通过computed属性将Vuex中的message状态映射为组件的计算属性，以便在模板中进行显示。事件是一种允许子组件向父组件传递消息的机制。
vue列表进入详情页面返回时数据缓存
yanby921005的博客
05-18 6034
1.在app.vue中添加 2.在router.index中添加 3.在列表页面添加
『VUE』09. 事件传参（详细图文注释）
MZH
04-03 1829
『VUE』09. 事件传参（详细图文注释）
vue中如何实现跳转页面时传递参数过去
weixin_50240716的博客
12-07 721
一、配置路由时动态绑定路由 二、跳转到detail页面时，获取这个id 通过$route.params.id来获取跳转时传递过来的参数 $route：当前哪个路由处于活跃状态，拿到的就是哪个路由
vue - ＜a＞标签路由传参-接收参数
jieweiwujie的博客
11-03 753
Vue如何实现带参跳转
qq_45750154的博客
05-18 716
本篇文章给大家详细介绍一下Vue实现带参跳转的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 主页面：name —> shishengzuotanhuichaxun 此页面表格中的数据均通过接口从后端获取数组对象并渲染，每一行数据都有对应的行id，我们的目的就是根据表格中每行数据的行id不同进而跳转至对应的子详情页面 子页面（详情页面）：name —> Cinfo 此页面为拿到行id后通过调用相应接口所要渲染的页面 项目简介及使用带参跳转的原因： 本
vue带值跳转页面并进行渲染
04-17
2. 在页面中通过 $router.push 进行跳转并传递参数 ``` this.$router.push({ name: 'user', params: { id: userId }}) ``` 3. 在目标组件中通过 $route.params 获取参数并进行渲染 ``` User ID: {{ $route....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值