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-NVUEconst eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE// #endif// #ifndef APP-NVUEconst eventChannel = this.getOpenerEventChannel();// #endif// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on('变量参数名', function(data) {console.log(data.data) // 'data from starter page'self.a = data.data})
}

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

uniapp的navigateTo页面跳转参数传递问题相关推荐

【uniapp】跳转 navigateTo 页面跳转路径有层级限制，不能无限制跳转新页面解决方法
onLoad(options) {let pages = getCurrentPages();// 获取页面栈总页数this.pagesCount = pages.length; } // 去跳转to ...
vue保存页面的值_vue前端页面跳转参数传递及存储
不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...
uniapp实现tabbar页面跳转前进行拦截
遇到的需求:进入小程序wxlogin请求成功后请求另外一个接口会获取一个字段值,根据这个值判断能否跳转到第二个tabaar页面并给出相应的提示. 使用uni.addInterceptor uni.ad ...
php页面跳转参数传递参数,php页面跳转怎样传递参数
[摘要] PHP即"超文本预处理器",是一种通用开源脚本语言.PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言.PHP独特的语法混合了C.Java.Perl以及 ...
小程序中 wx.navigateTo 页面跳转没有反应？
页面js文件中加入 show: function () { wx.navigateTo({ url: '/pages/show/show' }) } 这个函数目的在于要做跳转到新的页面,但是你可能会 ...
【Android 组件化】路由组件 ( 页面跳转参数依赖注入 )
文章目录一.参数自动注入二.自定义注解三.使用 @Extra 自定义注解四.注解处理器解析 @Extra 自定义注解并生成相应 Activity 对应代码五.博客资源组件化系列博客 : ...
uni-app微信小程序uni.navigateTo跳转无效问题；记录一次uni-app页面跳转无效，来回跳转问题；wx.navigateTo ，跳转超过10次怎么点不动的解决办法。
场景需求:从小程序A页面跳转到小程序B页面,然后B页面还可以跳到A页面. 跳转失效原因: –1.uni.navigateTo只能跳转到非tabBar页面,tabBar导航栏页面只能用uni.switc ...
uni-app 使用 web-view 页面之间互相跳转、通信
最近开发小程序的时候.需要嵌入一个第三方网站.并且和第三方网站有些交互.这个第三方页面本身就是一个 HTML 页面.想着把它给嵌入到 uni-app 中,结果没实现-(很多的 js 代码在小程序中不识 ...
视频直播网站源码，uniapp页面跳转的几种方法和区别
视频直播网站源码,uniapp页面跳转的几种方法和区别保留当前页面,可跳转到非 tabBar 页面,使用uni.navigateBack可以返回到原页面(可传参) uni.navigateTo({u ...
uni-app页面跳转以及传值
在uni-app中是没有路由这一说法的,想要跳转页面官方给出了以下几种方法: 一.通过配置pages.json里面的tabBar来实现,主要写法请参考官方文档: uni-app官方配置pages.js ...

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

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

URL直接传递

使用eventChannel

uniapp的navigateTo页面跳转参数传递问题相关推荐

最新文章

热门文章