Vue---传参params 、query刷新页面参数会丢失

Posted 2023-03-01

参考技术A 从其他页面传过来的参数刷新页面的时候参数会丢失
解决办法，只有常用的两种方法

注意点1、路由后面必须带参数，2、传参的页面中name: 'content',不能写成name: '/content',

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)

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