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

智能推荐

window下使用SetUnhandledExceptionFilter捕获让程序的崩溃_preventsetunhandledexceptionfilter-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏2次。简单使用SetUnhandledExceptionFilter()函数让程序优雅崩溃虽然是大公司的产品,QQ它还是会在我们的折腾下崩溃的,但是它总是崩溃的很优雅,还要弹出自己的对话框来结束。并且发送报告,去掉了系统默认的发送报告的对话框。所以一拍脑袋,想让自己的程序崩溃的体面一点。自己想了大概的思路,觉得可以用一个进程来监控目标程序。的确也可以拿到了目标程序崩溃的信息,知道它什么时候崩..._preventsetunhandledexceptionfilter

[多图]你应该来看看!Windows 8入门操作锦集-程序员宅基地

文章浏览阅读556次。安装好Win 8之后,接下来该做什么呢?你必须习惯使用这个新的操作系统,因为过不了多久,你的老板、朋友或家人就会指望你用它做些正经事了。本指南就是为这个目的服务的。我们将告诉你如何找回桌面,如何更改Windows设置,它有哪些花哨的触屏手势,以及在没有触屏的情况下,又如何用鼠标和键盘来操作。换句话说,我们将告诉你:在Win 8中,你该如何前往你想去的地方,这样你就可以尽快进入工作状态了。基

基于树莓派(ARM)的人脸识别摄像头(QT5.8+OPENCV3.4.5)开发总结_基于qt+树莓派实现人脸识别-程序员宅基地

文章浏览阅读5.1k次,点赞12次,收藏50次。前言这是帮学妹做的一个毕业设计,觉得有趣就接了。功能较为简单,更像是一个带了人脸识别功能的行车记录仪。从18年12月开始做,大部分代码在3月写出来,到现在大概花了20个工作日的样子。期间从零开始学了C++和QT,opencv也经历了从C版本到C++版本,收获不小。这算是我第一个独立的“产品”。目前只完成了ubuntu14.04系统下的功能,还没有移植树莓派做屏幕适配等,也没有进行自己的人脸..._基于qt+树莓派实现人脸识别

MySql安装缺少的.net framework 4.0直接运行安装即可_mysql8安装 提示缺少framewark-程序员宅基地

文章浏览阅读2k次。点击打开链接_mysql8安装 提示缺少framewark

Python编程实例-PyQt5 GUI编程- 工具栏(QToolBar)_python qtoolbar-程序员宅基地

文章浏览阅读461次。QToolBar 小部件是一个可移动的面板,由文本按钮、带有图标的按钮或其他小部件组成。它通常位于菜单栏下方的水平栏中,并且可以浮动的。_python qtoolbar

24美赛数学建模C题详解及资料_24美赛c题-程序员宅基地

文章浏览阅读351次。本次美赛建模个人认为难度排名:A=D>B>C>E=F;上手简单程度:C>E=F>B>A=D。由于经历有限,本次我会主要针对 C 题进行助攻,包括但不限于:具体思路分析和数据挖掘,资料查找,数据可视化和模型建立,以及半成品论文等。关注wx:小何数模,获取本次比赛 C 题助攻资料!_24美赛c题

随便推点

NC_UAP中间件集群+Apache负载均衡 Linux64位安装配置_nc5 集群-程序员宅基地

文章浏览阅读1.9k次。一、准备安装介质介质名说明httpd-2.2.34.tar.gzApache HTTP Sever/用于负载均衡mod_jk.so是Apache服务器的一个可插入模块,用以为Apache或IIS服务器提供处理JSP/Servlet的能力 * Linux64位操作系统、NC安装介质_nc5 集群

脉动阵列在二维矩阵乘法及卷积运算中的应用_systolic arrays-程序员宅基地

文章浏览阅读6.2k次,点赞9次,收藏31次。脉动阵列(Systolic Array)本身是一个“古老”的概念,在1982年就已经提出了,可是,最近由于Google的TPU采用了这个结构作为计算的核心结构,脉动阵列又一次地火了起来。我也是因为关注TPU才开始去了解脉动阵列的,但是由于目前脉动的阵列比较零散,在搞明白脉动阵列以及TPU怎么使用脉动阵列进行卷积的过程中走了很多“弯路”,所以就用这篇文章作为我学习脉动阵列的笔记,也记录一下我自己对脉..._systolic arrays

基于java与vue的生鲜物流系统的设计与实现-计算机毕业设计源码13339_配送费的算法java+vue-程序员宅基地

文章浏览阅读719次,点赞17次,收藏11次。本生鲜物流系统开发的主要目的是方便用户进行在线下单,通过平台就能够查看自己的物流信息,同时能够提高物流公司管理的效率。论文针对在用户查看选择快递公司,管理人员需要对物流相关的一些信息进行管理的需求,设计了生鲜物流系统的框架,给出了生鲜物流系统的总体设计,并对生鲜物流系统的架构及关键模块的实现过程进行了详细论述。采用JAVA的springboot框架和MySQL数据库技术,基于B/S模式实现了一个完整系统的设计,为大使用者提供了良好的物流信息管理的系统_配送费的算法java+vue

【python】【文字识别】利用pytesseract、PIL包提取图片文字_python pil和pytesseract 解析字体-程序员宅基地

文章浏览阅读776次。本文的目的是为了提取图片中的文字,图片如下所示:第一:首先保证有这两个包:pytesseract、PIL直接pip即可;第二:网上找资源,下载tesseract-ocr;【微软本已经下载成功,存放目录如下:】安装tesseract-ocr;【默认路径:C:\Program Files (x86)\Tesseract-OCR】环境配置;【将上述路径配置进去】将安装包中的中..._python pil和pytesseract 解析字体

POS小票打印-程序员宅基地

文章浏览阅读243次。// 向LPT口打印一个文本文件procedure TPosFrm.PrintFile(AFileToPrint: string);varPort, FileToPrint: TextFile;ALine: string;beginAssignFile(FileToPrint, AFileToPrint);Reset(FileTopr..._pos小票

基于VCS使用VPI+PLI/DPI在verilog中调用C程序进行cover property驱动的仿真控制_vcs pli-程序员宅基地

文章浏览阅读3.8k次,点赞3次,收藏20次。本文介绍一种在verilog中,运用PLI机制调用C程序的方法,其中的C程序,可以接受传参,且可以有返回值,仿真器选择的VCS。编写C程序 #include <stdio.h>//#include "vpi_user.h"//使用PLI有两种机制:TF/ACC机制,或者VPI机制void hello_calltf(int user_data, int reason){ int var,result; var = tf_getp(1);//取$hello调用时的第_vcs pli

推荐文章

热门文章

相关标签