uniapp的navigateTo页面跳转参数传递问题_uni.navigateto刷新携带参数丢失-程序员宅基地

技术标签: web app  前端  vue.js  javascript  

uniapp的navigateTo页面跳转参数传递问题

URL直接传递

例如:uni.navigateTo({ url: '/pages/salemanManage/my/myorder/particulars?id=' + this.orderInfo.id })
弊端:url有长度限制,太长的字符串会传递失败。
处理方式: 使用encodeURIComponent进行编码。
参数传递:先JSON再编码

detail(item) {
    
	uni.navigateTo({
    
		url: '/pages/salemanManage/homePage/salesReturn/detail?data=' + encodeURIComponent(JSON.stringify(item)),
	})
},

参数接收:先解码再JSON

onLoad(option) {
    
	this.dataList = JSON.parse(decodeURIComponent(option.data))
},

注意:如果传递参数的字符串中存在特殊字符(如 #,%,?,&,=),则在接收参数之前需要先处理特殊字符,将其改为十六进制,否则会报错
解决方法:
在methods中添加方法:

// 因为decodeURIComponent参数参数传递在接收时有特殊字符会报错,所以在接收前要处理特殊字符为十六进制
encodeSearchKey(key) {
    
	const encodeArr = [{
    
		code: '%',
		encode: '%25'
	},{
    
		code: '?',
		encode: '%3F'
	},{
    
		code: '#',
		encode: '%23'
	},{
    
		code: '&',
		encode: '%26'
	},{
    
		code: '=',
		encode: '%3D'
	}]
	return key.replace(/[%?#&=]/g, ($, index, str) => {
    
		for(const k of encodeArr) {
    
			if(k.code === $) {
    
				return k.encode
			}
			}
	})
},

在获取参数时:

onLoad(option) {
    
	// 处理特殊字符
	let options = this.encodeSearchKey(option.data)
	this.dataList = JSON.parse(decodeURIComponent(options))
},

使用eventChannel

传递参数时:

uni.navigateTo({
    
  url: 'pages/test?id=1',
  success: function(res) {
    
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('变量参数名', {
     data: 'data from starter page' })
  }
})

获取参数时:

onLoad: function(option) {
    
  let self = this
  // APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel,请换用this.$scope.eventChannel来获取
  // #ifdef APP-NVUE
  const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
  // #endif
  // #ifndef APP-NVUE
  const eventChannel = this.getOpenerEventChannel();
  // #endif
  // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('变量参数名', function(data) {
    
    console.log(data.data) // 'data from starter page'
    self.a = data.data
  })
}

弊端:页面刷新会数据丢失

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_49160916/article/details/125634846

智能推荐

python青果教务系统抢课_名额不够,技术来凑,利用Python实现教务系统强制性抢课...-程序员宅基地

文章浏览阅读1.3k次。最近一学期一次的抢课大戏又来了,几家欢乐几家愁。O(∩_∩)O哈哈~(l我每次一选就过了hah,我还是有欧的时候滴)。看着他们盯着教务系统就着急,何况我们那教务系统,不想说什么。emmm 想周围的朋友,正好下午利用扩容前一段时间写了个小脚本帮助朋友抢课。(当然抢到了啦,^_^)私信小编001即可获取大量Python学习资料,名额有限因为时间不够,来不及仔细琢磨,我第一想法就是直接提交选课的数据包(..._青果教务系统抢课

windows 加 switchyomega + burp 抓https包-程序员宅基地

文章浏览阅读4.6k次。很简单,下载证书后导入到受信任根目录证书下载,直接在代理状态浏览器访问burp点击CA就可以下载了 设置该证书全部信任,,switchyomega 设置如下即可 就可以抓https的包了 ...

用C语言写循环赛日程表,循环赛的方法与编排-程序员宅基地

文章浏览阅读1k次。一、循环赛的种类与特点(一)循环赛的种类循环赛又称循环法。是指参赛队(或个人,下同)之间,都要互相轮流比赛,最后按照各参赛队在全部比赛中的胜负场数、得分多少排定名次的比赛方法。它在对抗性项目比赛中经常被采用。循环赛包括单循环、双循环或分组循环三种。单循环是所有参赛队(人)相互轮赛一次;双循环是所有参赛队(人)相互轮赛二次;分组循环是参赛队(人)较多时,采用种子法,把强队(人)分散在各组,先进行小组..._c语言循环赛互打一场比赛 甲队两胜

springboot项目访问html页面,发现端口不一致&继承WebMvcConfigurationSupport类会导致自动配置失效_springboot项目前端端口号不同怎么办-程序员宅基地

文章浏览阅读1.6k次,点赞4次,收藏6次。最后的解决方法“在config--WebMvcConfig中不要继承WebMvcConfigurationSupport,而是实现WebMvcConfigurer接口”,且不要在idea中直接点击浏览器图标打开对应的html页面,要自己在浏览器输入url。在本次debug过程中,更加清楚地明白了,springboot项目启动过程中,只扫描引导类同包或子包下的程序,而在resources目录下的静态资源文件(没放到),需要被映射,才能被扫描到。_springboot项目前端端口号不同怎么办

k8s.配置管理.configmap&secret_configmap @value-程序员宅基地

文章浏览阅读80次。configmap 和secret 都需要提前创建configmap和secret都可以为pod提供挂载和变量的方式变量的方式有envfrom全部变量和valuefrom单个变量的引用configmap和secret 需要和引用的pod或者资源对象在同一个ns下。_configmap @value

System.TypeInitializationException: 'The type initializer for 'MySql.Data.MySqlClient.Replication.Re...-程序员宅基地

文章浏览阅读2.2k次。下午在调试的时候报错数据库连接就报错我就很纳闷后面用原来的代码写发现还是报错System.TypeInitializationException:'The type initializer for 'MySql.Data.MySqlClient.Replication.ReplicationManager' threw an exception.'应该是出在Mysql包上的问题..._system.typeinitializationexception:““mysql.data.mysqlclient.mysqlpoolmanag

随便推点

汇编指令长度计算_汇编指令占多少字节-程序员宅基地

文章浏览阅读5.1k次,点赞11次,收藏58次。指令长度与寻址方式有关系,规律或原则如下:一、没有操作数的指令,指令长度为1字节。如es:ds:cbwxlat等。二、操作数只涉及寄存器的指令,指令长度为2字节。如mov al,[si]mov ax,[bx+si]mov ds,ax等。三、操作数涉及内存地址的指令,指令长度为3字节。如mov al,[bx+1]mov ax,[bx+si+3]lea di,[1234]mov [2345],ax等。四、操作数涉及立即数的指令,指令长度为:寄存器类型+2。8位寄存器,寄存器_汇编指令占多少字节

二、RSA加密_ctf rsa 多个n和多个c-程序员宅基地

文章浏览阅读3.4k次。CTF中的RSA及攻击方法笔记1 数论基础1.1 模运算规则2 RSA相关题目2.1 已知 n,e,c 求 m2.2 已知 p,q,e 求 d2.3 已知dp,dq,c,p,q 求m2.4 仅已知c,c特别大 【c = m^e mod n】2.5 已知n1,n2,c1,c2,n 求 m2.6 已知n1,n2,e,c2 求m2.7 已知e,d,N 求p,q1 数论基础参考链接:https://www.freebuf.com/articles/web/257835.html1.1 模运算规则模运算与基_ctf rsa 多个n和多个c

mysql中把bigint类型转换为时间格式,与hive中unix_timestamp、FROM_UNIXTIME两个函数之间的区别_bigint转日期-程序员宅基地

文章浏览阅读2w次,点赞4次,收藏15次。数据库中时间类型是这样的,13位bigInt类型的数据select date_format(FROM_UNIXTIME(列名/1000),'%Y%m%d') from xx表原理就是把13位的时间格式/1000等于时间戳,使用FROM_UNIXTIME把时间戳转换成具体的日期ps:将时间转换为时间戳select unix_timestamp('2018-08-30..._bigint转日期

exit status 5: �ܾ����ʡ� exit status 1: ���_exit status 5: exit status 1:-程序员宅基地

文章浏览阅读1.1k次。使用nvm切换node版本出现上述乱码时。使用管理员模式打开CMD就可以解决了~_exit status 5: exit status 1:

对Java和Linux的认识,Java类的认识-程序员宅基地

文章浏览阅读279次。Java使用类来构造自己的数据类型,类其实就是对一类数据和行为的数据封装;可以达到低耦合功能;Java注意啦:用类也是我们为了定义自己数据类型的一种方法,所以结构体,共用体也是一样的;都是为了处理数据而用的方法!类的存放问题: java源代码文件是以类为中心的,一个类的定义源码必须只在一个源文件实现;一个“文件名.java”文件名必须与文件中用public class 修饰的类名一致,java语法..._linux和java

快给你的Vue项目添加一个编辑图片组件吧_vue-image-editor-程序员宅基地

文章浏览阅读8.2k次,点赞20次,收藏59次。快给你的Vue项目添加一个编辑图片组件吧给大家推荐一款功能极其强大的图片编辑插件 tui.image-editor快速体验首选在你的前端项目中安装:npm i tui-image-editor// oryarn add tui-image-editor现在你就去新建一个.vue文件,复制进去下面这段代码:<template> <div id="tui-image-editor"></div></template><scr_vue-image-editor