记录vue路由传递对象

(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