uni-app：页面直接传递复杂参数

最新推荐文章于 2024-09-19 08:39:24 发布

原创最新推荐文章于 2024-09-19 08:39:24 发布 · 848 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

收录于

uniapp 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js中通过`encodeURIComponent`和`JSON.stringify`将对象参数传递到URL，并在目标页面使用`decodeURIComponent`和`JSON.parse`进行解析，实现页面间数据的传递。这种方法在不使用额外库如qs的情况下，提供了一种基础的数据传输解决方案。

我想实现的效果：点击编辑以后将获取的参数传到另一个页面进行编辑

使用JSON的decodeURIComponent和stringify函数

(这里如果使用qs.stringify()和qs.parse()会更加规范化，不过这里不需要给别人看所以就不在意这么多细节了)

传参页面

//methods内写入

edit(item) {

 // item为我需要传递的数据,类型为对象

 const list = encodeURIComponent(JSON.stringify(item));
 // 转换为参数拼接到url中
 uni.navigateTo({
  url: '/pages/job/publish?item=' + list
 });
},

接收参数页面

	onLoad(options) {
        // 此页面也可以用于新增 所以如果没有该值就跳转出去
		if (!option.item) return;

		const item = JSON.parse(decodeURIComponent(option.item));
        //后续对数据的处理
	}