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

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
  })
}

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

本文链接：https://blog.csdn.net/weixin_49160916/article/details/125634846

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

BAT批处理创建文件桌面快捷方式_批处理创建桌面快捷方式-程序员宅基地

文章浏览阅读1.5w次，点赞9次，收藏26次。简介一个创建某个文件到桌面快捷方式的BAT批处理.代码@echooff::设置程序或文件的完整路径（必选）setProgram=D:\Program Files (x86)\格式工厂.4.2.0\FormatFactory.exe::设置快捷方式名称（必选）setLnkName=格式工厂v4.2.0::设置程序的工作路径，一般为程序主目录，此项若留空，脚本将..._批处理创建桌面快捷方式

射频识别技术漫谈（6-10）_芯片 ttf模式-程序员宅基地

文章浏览阅读2k次。射频识别技术漫谈（6-10），概述RFID的通讯协议；射频ID卡的原理与实现，数据的传输与解码；介绍动物标签属性与数据传输；RFID识别号的变化等_芯片 ttf模式

Python 项目实战 —— 手把手教你使用 Django 框架实现支付宝付款_django 对接支付宝接口流程-程序员宅基地

文章浏览阅读1.1k次。今天小编心血来潮，为大家带来一个很有趣的项目，那就是使用 Python web 框架 Django 来实现支付宝支付，废话不多说，一起来看看如何实现吧。_django 对接支付宝接口流程

Zabbix 5.0 LTS在清理历史数据后最新数据不更新_zabbix问题没有更新-程序员宅基地

文章浏览阅读842次。Zabbix 5.0 LTS，跑了一年多了一直很稳定，前两天空间显示快满了，于是手贱清理了一下history_uint表（使用mysql truncate），结果折腾了一周。大概故障如下：然后zabbix论坛、各种群问了好久都没解决，最后自己一番折腾似乎搞定了。初步怀疑，应该是由于历史数据被清空后，zabbix需要去处理数据，但是数据量太大，跑不过来，所以来不及更新了（？）..._zabbix问题没有更新

python学习历程_基础知识（2day）-程序员宅基地

文章浏览阅读296次。一、数据结构之字典 key-value

mybatis-plus字段策略注解strategy_mybatisplus strategy-程序员宅基地

文章浏览阅读9.7k次，点赞3次，收藏13次。最近项目中遇到一个问题，是关于mybatis-plus的字段注解策略，记录一下。1问题调用了A组件（基础组件），来更新自身组件的数据，发现自己组件有个字段总是被清空。2原因分析调用的A组件的字段，属于基础字段，自己业务组件，对这个基础字段做了扩展，增加了业务字段。但是在自己的组件中的实体注解上，有一个注解使用错误。mybatis-plus封装的updateById方法，如果..._mybatisplus strategy