【Web前端】uni-app页面跳转uni.navigateTo传递对象参数

实现需求：在列表页点击一个商品跳转到商品的详情页，主要有2个动作：1:、页面跳转；2、跳转页面后取得数据渲染详情页。

---

目录

uni.navigateTo(OBJECT)

 一、跳转页面

二、传递参数

 三、接收参数

用this.$router.push方法，效果不理想，url不会显示参数，刷新页面后数据会丢失，导致页面无法渲染。

当然也有办法解决这个问题，但路由配置略复杂，遂放弃。

相较之下，还是uni.navigateTo好用。

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

 一、跳转页面

使用方法如下， url取起始页面与目标页面的相对路径，？后面携带传递的参数。

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: '/pages/detail?id=1&name=uniapp'
});

二、传递参数

如果传递参数含有特殊字符，或是对象类型数据，需要进行编码再传递。

比如下面的参数item是一个对象变量，先转变为字符串。

uni.navigateTo({
    url: '/pages/detail?item='+encodeURIComponent(JSON.stringify(this.item))
});

 三、接收参数

在detail页面解码后接收参数。

// 在detail.vue页面接受参数
onLoad: function (option) {//option为object类型，会序列化上个页面传递的参数
	const item = JSON.parse(decodeURIComponent(option.item));
}