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

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

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

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

适用于简单的数据传递

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

适用于对象数据传递

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

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

  1. export function joinUrlParams(url,params,usedKey = []){
  2. if(url.indexOf("?") != -1){
  3. return url
  4. }
  5. if(params === null || typeof(params) === "undefined" || typeof(params) !== "object"){
  6. return url
  7. }
  8. let param = ""
  9. for(var key in params){
  10. if(params[key] !== "" && typeof(params[key]) !== "undefined" && params[key] !== null){
  11. if(usedKey.length>0){
  12. for (var i = 0; i < usedKey.length; i++) {
  13. if(key == usedKey[i]){
  14. if(param != ""){
  15. param += "&"
  16. }
  17. param += key + "=" + params[key]
  18. break;
  19. }
  20. }
  21. }else{
  22. if(param != ""){
  23. param += "&"
  24. }
  25. param += key + "=" + params[key]
  26. }
  27. }
  28. }
  29. if(param != ""){
  30. return url + "?" + param
  31. }
  32. return url
  33. }

调用方法

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

发表评论

表情:
评论列表 (有 0 条评论,485人围观)

还没有评论,来说两句吧...

相关阅读