vue路由传参,刷新页面，参数变成[Object object]

sika-master

于 2022-05-18 21:22:52 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42150719/article/details/124836425

本文介绍了在Vue中遇到路由传参时，当参数为对象且刷新页面，参数显示为[Object object]的问题。分析了原因，并提出了解决方案，即对于对象参数，应当使用JSON.stringify()进行序列化处理，在接收端再用JSON.parse()还原对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在项目中，调整路径经常需要携带参数过去

常见的携带参数的方式，就是通过query和params的方式

this.$router.push({
  name: `test`,
  params: {
    a: 1,
  }
})
//或者
this.$router.push({
  path: `/test`,
  query: {
    a: 1,
  }
})
//接受参数
this.$route.params.a

this.$route.query.a

原因分析：

如果传递的参数是个对象，那么刷新或者调整再回来，参数的值就会变成[Object,Object],页面上显示就会出现错误

解决方案：

如果携带的参数个数少的情况下，可以直接写在query或者params中。

如果必须要携带对象的参数。，就要把对象使用JSON.stringify(Obj)
转换

this.$router.push({
  path: `/test`,
  query: {
   Obj:JSON.stringify(obj)
  }
})

接受时

let obj = JSON.parse(this.$route.query.Obj);