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

「爱情、让人受尽委屈。」 2021-07-25 16:44 475阅读 0赞

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

无论是app 还是 页面 或者小程序，在页面跳转时，很多时候都需要传递数据，方便二级页面进行使用。  
[uniapp官网中关于路由与页面跳转链接][uniapp]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
官网提供的示例：

**适用于简单的数据传递**

//在起始页面跳转到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"])
    });

[uniapp]: https://uniapp.dcloud.io/api/router?id=navigateto
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/7b2c7e0f2c324b58b8274a6faf6045b0.png