成功解决:如何通过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、后语

学无止境。。。。。。

相关文章
|
缓存
如何清除keep-alive缓存
如何清除keep-alive缓存
1518 6
|
JavaScript
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
2003 0
element-plus:el-date-picker日期只选择年月不要日
element-plus:el-date-picker日期只选择年月不要日
2165 0
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
2642 0
|
3月前
Trae关闭后,自动重新安装问题解决
本方案指导用户将Trae更新模式设为手动:进入设置→Editor设置→应用程序→更新,选择Manual模式。配图清晰展示各操作步骤界面,助您轻松完成配置
951 3
|
JavaScript 网络架构
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
3625 4
|
JSON 前端开发 JavaScript
搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!
本文来自【沉浸式趣谈】,探讨前端处理Excel的三大主流库:xlsx、Handsontable和ExcelJS。 - **xlsx**:轻量高效,适合简单读写数据,但样式支持有限。 - **Handsontable**:功能强大,提供类Excel在线编辑体验,但商用需付费且性能消耗较大。 - **ExcelJS**:现代全能,API友好,支持复杂样式与公式,免费开源,推荐用于精细处理场景。
1512 0
搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!
|
JavaScript
Vue系列——通过moke进行数据模拟
通过moke进行数据模拟
1336 0
|
数据格式
【vue2事件传参1】自定义参数:在elementui的change事件中,自定义参数的传递方法
【vue2事件传参1】自定义参数:在elementui的change事件中,自定义参数的传递方法
1932 1
【vue2事件传参1】自定义参数:在elementui的change事件中,自定义参数的传递方法
|
前端开发
uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)
uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)
4388 1

热门文章

最新文章