【vue】携带对象参数跳转页面

编码操作：JSON转字符串与解码应用

最新推荐文章于 2025-09-03 16:27:49 发布

原创最新推荐文章于 2025-09-03 16:27:49 发布 · 924 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #跳转页面带参数

vue工作专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何将JSON对象编码成字符串并进行URL编码，以便在编辑操作中传递，同时展示了如何在组件中通过mounted钩子接收并解析解码后的对象。

1.携带对象

json转字符串后进行编码

<span slot="action" slot-scope="record" ref="action">
         <a-button type="link" @click="$router.push({name:'editSonAccount',query: { record: 
          encodeURIComponent(JSON.stringify(record)) }})">
                    编辑
         </a-button>
</span>

2.接收对象

在mounted钩子中获取并判断

//mounted钩子中调用该方法
handleForm(){
   let record = this.$route.query.record;
   if(roleRecord){
       this.form = JSON.parse(decodeURIComponent(record));
   }
            
},