vue路由传参当刷新页面时,参数变成“[object Object]”

前言

通常我们需要通过路由携带传递参数,大概有三种写法:

1)地址后面直接带参数
2)query传参
3)params传参

由于params传参刷新页面,会导致数据丢失。所以采用query传参方式比较多。

问题描述

首先,用的query传参方式,如果传参是一个对象,点击进入页面路由可以获取对象的值;但是刷新页面会导致获取不到对象值,被强制转换为字符串 "[object Object]",导致数据不能使用。

tempObj: {name: 'Juliet', age: 18}  //未刷新前打印数据
tempObj: "[object Object]"  //刷新页面后打印数据

解决方法

我们可以通过 JSON.stringify() 转为字符串,字符串是单条数据,刷新页面数据就不会丢失,再将字符串通过 JSON.parse 转成对象就可以解决问题, 下面以query传参方式为例。

//传递参数
let tempObj = {name: 'Juliet', age: 18}

toBuy () {
   this.$router.push({ path: '/h5/indexCreateOrder', query: JSON.stringify(tempObj)})
 },
 
 // 接收参数
 let obj = JSON.parse(this.$route.query.tempObj)

如果传参是个数组的话,也会出现这种情况,所以也需要这样处理一下。

你可能感兴趣的:(Vue,vue.js,javascript,前端)