uniapp使用vue3语法利用uni.navigateTo跳转和接收参数

这篇具有很好参考价值的文章主要介绍了uniapp使用vue3语法利用uni.navigateTo跳转和接收参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官网利用vue3语法写uni.navigateTo跳转接参可能出现接收参数有问题的情况 ,获取上一个页面数据需要进行调整。

        uni官网:uni.navigateTo(OBJECT) | uni-app官网

一、传参给下一个页面

uni.navigateTo({
					url:'/pages/index/inviteOrder',//跳转的页面
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('acceptDataFromOpenerPage', {
                           // 传递的数据
							data:arr[0],
							address:address.value
						})
					}
				})

二、下一个页面接参

利用onload钩子3函数接收参数文章来源地址https://www.toymoban.com/news/detail-787857.html

onLoad(()=> {
			// 获取上一个页面传过来的数据
			const pages = getCurrentPages();  // 无需import
			const page = pages[pages.length - 1];
			const eventChannel = page.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', (data) => {
				arr.push(data.data)
				// console.log(data.data);
				address.value=data.address
			})
		})

到了这里,关于uniapp使用vue3语法利用uni.navigateTo跳转和接收参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用uni-ui 实现下拉搜索框(uniapp+uni-ui+vue3 开发微信小程序)

    需求:输入框中输入内容--远端搜索匹配的选项--展示选项(可点击选择选项) 代码实现 htm:(一个输入框input + list) js: css

    2024年01月24日
    浏览(55)
  • 手写类似于BetterScroll样式的左右联动菜单 uni-app+vue3+ts (使用了script setup语法糖)

     注意:在模拟器用鼠标滚动是不会切换光标的,因为使用的是触摸滑动。【自定义类型贴在最后了】 script 部分如下:  template部分如下: scss样式:  category.d.ts main-arr.d.ts  

    2024年02月05日
    浏览(48)
  • uniapp小程序路由跳转,使用uni.navigateBack方法,实现跳转传参

    由于小程序跳转限制10层,为了尽可能的减少页面栈,在小程序中会用到uni.navigateBack()方法,使用中难免会遇到页面跳转之间传参的问题。uni.navigateBack和uni.navigateTo、uni.redirectTo方式不同,不能通过路由拼接的方式传参,以下是三种跳转的方法: 在小程序中uni.navigateTo和u

    2024年02月16日
    浏览(61)
  • 探索uniapp+vue3解析markdown语法|uniapp键盘撑起

    最近正在尝试使用uniapp+vue3开发仿制chatgpt会话功能。 如上图:经过测试在 h5/App端/小程序端 均支持markdown语法解析,键盘撑起后,整体页面和顶部自定义导航栏不会被顶起。 使用了 markdown-it 和 highlight.js 插件实现markdown语法解析及高亮代码。 初始化markdown插件 解析markdown语法

    2024年02月11日
    浏览(61)
  • Vue3+TS版本Uniapp:封装uni.request请求配置

    作者: 前端小王hs 阿里云社区博客专家/清华大学出版社签约作者✍/CSDN百万访问博主/B站千粉前端up主 uniapp 的封装逻辑不同于 Vue3 项目中直接使用 axios.create() 方法创建实例(在 create 方法中写入请求的地址、请求头、超时等内容),代码如下: PS:上述代码来自博主在B站的

    2024年04月22日
    浏览(37)
  • uniapp小程序路由跳转,使用uni.navigateBack方法,实现页面返回上一页

    在小程序中uni.navigateTo和uni.redirectTo是通过路由拼接的方式传参 uni.navigateBack() 是一个用于在uni-app中进行页面后退操作的API。它可以让你返回到上一个页面。在给定的示例中,uni.navigateBack() 被调用并传入了一个对象作为参数。该对象具有一个属性 delta,用于指定要后退的页面

    2024年04月28日
    浏览(46)
  • uni-app——使用uni.navigateTo传递对象参数

    文章目录 一、 传递一般参数 二、 传递对象参数 1. 传递参数 2. 接收参数 navigateTo进行页面传递参数,在下一个页面接收数据,一般在在onLoad钩子函数中获取

    2024年02月13日
    浏览(61)
  • 在uniapp vue3 setup语法糖中调用onLoad、onShow等生命周期

    从 @dcloudio/uni-app 导出 可导出项:

    2024年02月16日
    浏览(46)
  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(64)
  • uniapp之通过vue-cli命令行创建Vue3/Vite版,JavaScript开发,引入uni-ui扩展组件

    注意: Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包