uniapp 电商app 实现路由与页面跳转url拼接函数封装

路由与页面跳转传递数据函数封装

无论是app 还是 页面 或者小程序，在页面跳转时，很多时候都需要传递数据，方便二级页面进行使用。
uniapp官网中关于路由与页面跳转链接

官网提供的示例：

适用于简单的数据传递

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
     
    url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
     
    onLoad: function (option) {
      //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

适用于对象数据传递

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 在test.vue页面接受参数
onLoad: function (option) {
     
    const item = JSON.parse(decodeURIComponent(option.item));
}

如果是对象属性很多的情况下，传递数据会很繁琐，而且二级页面中的url拼接会很长，特别是二级页面需要的数据是传递对象中的部分参数时，这个时候，封装一个对象传递的函数尤为重要。
思路：可以传递对象，且表明需要传递的是哪些属性，函数自动执行对象中属性的挑选进而传递。方法实现如下：

export function joinUrlParams(url,params,usedKey = []){
     
	if(url.indexOf("?") != -1){
     
		return url
	}
	if(params === null || typeof(params) === "undefined" || typeof(params) !== "object"){
     
		return url
	}
	let param = ""
	for(var key in params){
     
		if(params[key] !== "" && typeof(params[key]) !== "undefined" && params[key] !== null){
     
			if(usedKey.length>0){
     
				for (var i = 0; i < usedKey.length; i++) {
     
					if(key == usedKey[i]){
     
						if(param != ""){
     
							param += "&"
						}
						param += key + "=" + params[key]
						break;
					}
				}
			}else{
     
				if(param != ""){
     
					param += "&"
				}
				param += key + "=" + params[key]
			}
		}
	}
	if(param != ""){
     
		return url + "?" + param
	}
	return url
}

调用方法

uni.navigateTo({
     
	url:joinUrlParams("/pages/goods/goods",data,["pictUrl","bannerList","zkFinalPrice"])
});