vue 传参数据丢失或者“[object Object]”

Posted 2023-05-15 粉色的海绵宝宝

路由传参3种方式
1、地址后面直接带参数
2、params传参（相当于post，不会显示在url里面）
3、query传参（相当于get，会显示在url里面）
当params传参刷新页面的时候，页面容易丢失数据，使用query传参可以避免丢失数据
当参数是object时的复杂参数时，接收参数容易变成“[object Object]”
解决办法：
可以通过JSON.stringify()转为字符串，字符串是基本数据类型，不会丢失，接收参数时通过JSON.parse()将字符串转换为对象即可获取数据
例：
const res = await queryById( id: record.productId ); recordDetail.value = res.data.result; router.push( name: url, query: recordDetail: JSON.stringify(recordDetail.value), , );

vue 路由传参数和隐藏参数

参考技术A vue中路由中需要传递参数的话可以用query和param传递，两者类似于get和post。前者地址栏类似xx?p=1后者为xx/1，且后者可以隐藏地址栏显示。其实也可以用vue推荐的vuex进行响应式的参数管理。

两者传递参数需要router/index.js进行配置：

只需要去掉修改path即可，但是刷新会丢失数据，可以通过localstorage解决刷新问题。