(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)
}

 

 

此微博经验学习于https://blog.csdn.net/L_eiDigaga/article/details/100315655

 

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐