记录vue路由传递对象

最新推荐文章于 2025-04-13 11:17:08 发布

洛抒

最新推荐文章于 2025-04-13 11:17:08 发布

阅读量6.6k

点赞数 8

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43021088/article/details/108536544

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文分享了在Vue中正确传递和接收对象参数的方法，避免使用不当导致的[object Object]显示错误及JSON解析错误，强调了使用JSON.stringify、JSON.parse结合encodeURIComponent和decodeURIComponent的重要性。

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

(ps：此条仅作为个人记录)

vue路由传递一个对象作为参数的时候，不使用JSON.stringify和JSON.parse，接收参数的页面刷新后，接收的对象会变为[object Object]

错误示范1：(未使用JSON.stringify和JSON.parse)

//传参页面
look(row){
 this.$router.push({
       path: './createProject',
       query:{allData: row}   //row是一个对象
 })
}



//接收参数页面
if (this.$route.query.allData) {
   console.log(this.$route.query.allData); 
}

第一次未刷新，打印结果（是正常的）

第二次刷新页面打印结果

所以使用JSON.stringify和JSON.parse

错误示范2（使用了JSON.stringify和JSON.parse，未使用decodeURIComponent）

//传参页面
look(row){
    let objData = JSON.stringify(row)  //row是一个对象
        this.$router.push({
        path: './createProject',
        query:{allData: objData}
    })
}


//接收参数页面
if (this.$route.query.allData) {
   let abc = JSON.parse(this.$route.query.allData)
   console.log(abc)
}

结果报错：

解决办法：（使用decodeURIComponent）

//传参页面
look(row){
    let objData = JSON.stringify(row)
    this.$router.push({
        path: './createProject',
        query:{allData: encodeURIComponent(objData)}
    })
}


//接收参数页面
if (this.$route.query.allData) {
    let formObj = decodeURIComponent(this.$route.query.allData)
    this.formLabelAlign = JSON.parse(formObj)
}