成功解决:如何通过this.$router.push(“/Login“)的方式传参,在另外一个页面接收数据的问题

简介: 这篇文章介绍了如何在Vue框架中通过路由跳转传递参数,并在另一个页面接收这些参数。具体方法是使用`this.$router.push`方法的`params`属性传递对象,然后在目标页面通过`this.$route.params`接收传递的参数。

我要实现的效果、购物车中的商品信息包含了购买商品的数量和商品的折扣总价。现在我要实现的是通过点击购买按钮、将这个商品的信息展示到一个新的页面、简单的方式就是直接将这个商品的信息通过传参的形式传到另外也给页面,然后展示出来。

具体的传参(做的笔记):路由的query、params参数

核心部分

这里将要传递的参数放入params中

    this.$router.push({
        name: '确认订单',
        params: {
          goodsInfo :row
        }
      });

在另外一个页面接收数据

this.$route.params.goodsInfo

1、购物车页面

在这里插入图片描述
点击购买按钮、将这一行的数据放到params参数中

 //确认订单
    confirmOrder(index,row) {
      console.error("订单商品信息")
      console.error(row)
      this.$router.push({
        name: '确认订单',
        params: {
          goodsInfo :row
        }
      });
    },

2、确认订单页面

页面暂未做、在这个页面获取到传输数据。数据都获得了、具体怎样展示、随意发挥

  created() {
    console.error("确定订单页面:");
    console.error(this.$route.params.goodsInfo);
  },

3、传输的数据展示

在这里插入图片描述
在这里插入图片描述

4、后语

学无止境。。。。。。

相关文章
|
小程序 API
uniapp中uview组件库丰富的Calendar 日历用法
uniapp中uview组件库丰富的Calendar 日历用法
1543 0
|
缓存
若依 this.$router.push 同地址不同参,页面不刷新问题
若依 this.$router.push 同地址不同参,页面不刷新问题
1494 0
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
1612 0
|
Linux iOS开发 MacOS
pnpm全局安装报错:Run “pnpm setup“ to create it automatically, or set the global-bin-dir setting, or the PN
pnpm全局安装报错:Run “pnpm setup“ to create it automatically, or set the global-bin-dir setting, or the PN
3527 0
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
|
JavaScript 网络架构
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
1854 4
|
10月前
|
存储 SQL 前端开发
【若依RuoYi-Vue | 项目实战】帝可得后台管理系统(二)
接着上回的【若依RuoYi-Vue | 项目实战】基于若依的帝可得后台管理系统(一),本次我们继续完成人员管理、设备管理、策略管理模块的开发。
1468 6
【若依RuoYi-Vue | 项目实战】帝可得后台管理系统(二)
|
12月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
2898 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
前端开发 数据库
两步教你ruoyi若依跳过前端拦截器变成自己的前端
如何通过修改前端配置和后端设置来跳过若依(RuoYi)前端的token验证,以便复用其前端框架并将其变成自己的前端。
 两步教你ruoyi若依跳过前端拦截器变成自己的前端
|
12月前
element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
这篇文章介绍了在Element UI框架中,如何解决表格组件复选框在分页时选中状态丢失的问题。
835 0