【Web前端】uni-app页面跳转uni.navigateTo传递对象参数

已于 2022-08-09 01:15:03 修改
阅读量4.3k 收藏 19
点赞数 3
分类专栏： Web前端 文章标签： 前端 javascript vue.js
于 2022-08-09 01:12:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dawson_Ho/article/details/126239325
版权
本文介绍如何在uni-app中使用uni.navigateTo进行页面跳转并传递对象参数，详细讲解了页面跳转的步骤、参数编码与解码方法，以确保数据在页面刷新后仍能正确渲染。
摘要由CSDN通过智能技术生成

实现需求：在列表页点击一个商品跳转到商品的详情页，主要有2个动作：1:、页面跳转；2、跳转页面后取得数据渲染详情页。

目录

 一、跳转页面

二、传递参数

 三、接收参数

用this.$router.push方法，效果不理想，url不会显示参数，刷新页面后数据会丢失，导致页面无法渲染。

当然也有办法解决这个问题，但路由配置略复杂，遂放弃。

相较之下，还是uni.navigateTo好用。

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

 一、跳转页面

使用方法如下， url取起始页面与目标页面的相对路径，？后面携带传递的参数。

//在起始页面跳
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Cimoon_
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
uniapp 页面间传参方法
carbonzhao的专栏
10-26 3343
一般来说 uni.navigateTo 的参数传递可以满足页面的传递，但遇到需要更新上级页面的需求时，就需要使用uni.e m i t ( ) 和 u n i . emit()和uni.emit()和uni.on() 进行页面间通讯。在一般情况下，单向传递已经可以满足我们的业务需求，如向下级页面传递需要显示的参数、变动的状态，向上级页面传递的需要更新的数据或是需要再次调用的函数。作为最常用也是最简单的跳转携带参数的API，这里不多赘述，想详细了解的朋友可以前往官方文档学习，这里只做传参分享。
uniapp 路由uni.navigateTo 传参
lanbaiyans的博客
05-12 3607
uniapp 路由uni.navigateTo 传参，是否需要转码解码decodeURIComponent，encodeURIComponent
uni-app系列:uni.navigateTo传值跳转
最新发布
肥晨开发的学习之路
06-24 3868
不会替换当前页面，而是将当前页面入栈，并跳转到应用内的某个页面。这意味着可以通过页面栈返回之前的页面。方法跳转到另一个页面并传递参数，可以使用页面路由的URL参数或者页面栈的方式来传递。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。可以将要传递的参数附加到目标页面的URL上。然后在目标页面中通过。本身并不直接支持通过页面栈传递数据，但可以使用。将数据存储到本地缓存中，然后在目标页面中通过。在uni-app中，如果想要通过。
uniapp日常总结--uniapp页面跳转方式
前端工作学习中
12-13 9651
UniApp（跨平台应用开发框架）是基于Vue.js的一种开发框架，可以用于同时在多个平台上构建应用程序，如iOS、Android等。在UniApp中，跳转页面通常使用uni.navigateTo、uni.redirectTo、uni.reLaunch等方法，具体方法的选择取决于你的需求。
uni-app如何页面传参数的几种方法总结
10-15
主要介绍了uni-app如何页面传参数的几种方法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
UNI-APP页面跳转时（uni.navigateTo），参数传递
沧海龙腾LV的博客
04-14 2万+
方法一： 1、在起始页面跳转到test.vue页面并传递参数 //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' }); 2、在test.vue页面接受参数 export default { onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 console.log(option.id); //打印
uniapp跳转页面传递参数
weixin_48285922的博客
07-20 1483
注意：页面跳转的时候，传递的只能是string类型的，现实中如果想要传递json、Array记得需要先转成string传递，传递接收后再转回来使用。
uni-app——使用uni.navigateTo传递对象参数
Bonsoir777的博客
12-27 8949
本文主要介绍如何通过uni.navigateTo传递对象参数
uni-app（最全）页面跳转和传递数据
热门推荐
liuhaoxin666的博客
04-07 4万+
uni-app页面跳转 刚做了一个uni-app的项目，在这总结一下跳转和传递数据 uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 参数 例子 uni.navigateTo({ url: 'test?id=1&name=uniapp' /*这是跳转到的页面路径，？id=1这些都是传递的数...
uni-app从0到1.DOC uni-app实现代码
01-10
uni-app 是一个由DCloud(即海豚浏览器团队)开发的多端开发框架，它允许开发者编写一套代码，同时发布到Android、iOS、微信小程序、支付宝小程序、百度小程序、字节跳动小程序等多个平台，极大地提高了开发效率和跨...
uni-app页面跳转uni.navigateTo传递对象参数
04-02
在uni-app中，可以通过uni.navigateTo方法实现页面跳转，并且可以通过query参数传递字符串类型的参数。如果要传递对象参数，可以将对象转换为字符串再通过query参数传递。 例如，需要传递一个包含姓名和年龄的对象...
2022-09-07 uni-app学习笔记(四) uni-app路由配置和页面跳转,uni.navigateTo跳转失败的可能原因以及解决方法
GAARA
09-07 2710
1.路由配置 2.编程式导航和组件式导航 示例:index.vue 回顾:vue的声明式导航和编程式导航的定义和写法区别 3.使用pages.json中的tabBar进行底部选项卡的设置 step1:pages文件夹下新建四个选项卡文件夹 step2:在uniapp官网复制tabBar的配置代码 step3:在iconfont上找上述页面对应的四个图标 step4:调整tabbar的页面路径和图片路径 4.【踩坑】uni.navigateTo跳转失败的可能原因以及解决方法 原因一:配置在tabBar中的路径
uniapp 跳转页面及传递参数 传参
weixin_51603392的博客
04-28 1万+
目录 1.标签跳转 1.标签跳转 <navigator :url=" './nav?index='+navData">点击传递参数</navigator> 2.api跳转
uniapp 跳转页面传值(对象)
qq_45729353的博客
09-28 2993
跳转页面传值(对象) url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决 传值 <navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator> 接收值 // navigate.vue页面接受参数 onLoad: function (option) { const
【最全】uni-app 页面跳转及参数传递
qq_59125846的博客
07-15 9979
方式一：标签跳转方式二：url跳转。
uni-app系列：页面跳转以及传递参数
happy81997的博客
08-27 2万+
uniapp实现页面跳转以及跳转后传值过去 一、链接跳转 链接跳转是通过navigator标签来实现的 <navigator :url=" './nav?index='+navData">点击传递参数</navigator> 二、事件跳转 用某个事件的函数，来实现跳转需求 1、uni.navigateTo(OBJECT) 功能： 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面 参数 代码 uni.navigat
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cimoon_

一分也是爱，用钱砸我

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值