taro跳转页面传参的几种方式

这篇具有很好参考价值的文章主要介绍了taro跳转页面传参的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我之前在网上也搜了挺多taro传参的方式,这里我总结一下

  1. 路由跳转分Taro.navigateTo与Taro.redirectTo,但是这两种方法只适用于传递少量参数
Taro.navigateTo跳转时是将新的页面加载过来,最多加载到10层,返回时去的是上一页;
Taro.redirectTo跳转的同时将当前页面销毁,返回时去的是上上页
传递

Taro.navigateTo({ url: '/pages/index/login/selectUser?id=1&test='+test })

Taro.navigateTo({ url: '/pages/index/login/selectUser?id='+传递的数值+'name='+传递的数值})

接收都是一样的

import Taro, { useRouter } from '@tarojs/taro';

接收路由跳转带过来的参数

const router = useRouter();

const a: any = router.params.id;

const b: any = router.params.test;

也可以这样子接收

const a: any = getCurrentInstance().router.params.id;

const b: any =getCurrentInstance().router.params.test;

  1. 传递大量参数

使用这个传递一次之后你可以在任何页面接收

const list: any = [];

list.value = res.data.list;

//传递数据,可传数组、对象、单个数据等等,list只是我自定义的一个名称可自己随便输入

Taro.preload({ list: list.value,name:name.value });

接收时

//接受跳转传递过来的值,不管传过来什么的都是存在preloadData里面

dataList.value = Taro.getCurrentInstance().preloadData;

const a:any = dataList.value.传过来的自定义数据集合名称这里我用的是list.里面存放的字段名,数组对象等等

const a:any = dataList.value.list;

const a:any = dataList.value.name文章来源地址https://www.toymoban.com/news/detail-468515.html

接收之后就可以根据传递过来的数据类型,字段名称进行赋值等等,本人亲测有效

到了这里,关于taro跳转页面传参的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue父子组件之间的传参的几种方式

    这是最常用的一种方式。通过props选项,在父组件中传递数据给子组件。在子组件中使用props声明该属性,就可以访问到父组件传递过来的数据了。 子组件向父组件传递数据的方式。在子组件中使用emit方法触发一个自定义事件,并通过参数传递数据。在父组件中监听这个事件

    2023年04月24日
    浏览(39)
  • vue中组件传参的几种方法

    Props:通过在父组件中定义props属性,将数据传递给子组件。子组件通过props属性接收数据。例如: $emit:通过在子组件中触发事件,将数据传递给父组件。父组件通过在子组件上监听事件,接收数据。例如: Provide/Inject:通过在父组件中提供数据,让子孙组件可以注入数据。

    2024年02月12日
    浏览(36)
  • 子组件向父组件传参的几种方法

    在用vue框架写项目的时候,多多少少会遇到子组件向父组件传参的方法。作为一个新手,确实让人头疼,于是便有了这篇小白写的总结,话不多说,开始! 以下方法全部基于这两个父子组件结构实现: 父组件 子组件 思路:在父组件中定义一个函数,通过props传递给子组件,

    2024年02月05日
    浏览(33)
  • uniapp页面跳转的几种方式

    定义:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 使用: 定义:可以关闭当前界面并跳转到其他的非tabbar界面(可带参数) 使用: 定义:关闭所有页面,打开到应用内的某个页面(可带参数) 使用: 定义:跳转到 tabBar 页面,并关闭其

    2024年02月01日
    浏览(40)
  • uniapp页面跳转的几种方式 以及举例(2)

    又来混时长 嫖流量卷了 保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack 可以返回到原页面。   关闭当前页面,跳转到应用内的某个页面。   关闭所有页面,打开到应用内的某个页面。 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 关闭当前页面,返回上一

    2024年01月19日
    浏览(34)
  • [uniapp的页面传参]详细讲解uniapp中页面传参的传递方式和接受方式 使用案例 代码注释

    在uniapp中,页面传参是非常常见的需求。本文将详细讲解uniapp中页面传参的传递方式和接受方式,以及使用案例,同时附上代码注释。 1. URL传参 URL传参是一种比较简单的传递方式,它是通过URL地址来传递参数的。我们可以在URL地址后面加上参数,例如: 在接收页面中,我们

    2024年02月19日
    浏览(34)
  • JS 实现页面跳转的几种方法

    我总结了这五种方法: 第一种:使用JS跳转页面 (1)跳转带参 (2)跳转无参 第二种:返回上一次预览界面 HTML页面嵌套 第三种:button按钮添加事件跳转   第四种:在新窗口打开 第五种:通过meta设置跳转页面 这里还有一个页面传值 第一个页面 第二个页面

    2024年02月01日
    浏览(32)
  • vue跳转页面的几种常用方法

    目录 vue跳转不同页面的方法 1.router-link跳转 2.this.$router.push() 3.a标签可以跳转外部链接,不能路由跳转 vue三种不同方式实现跳转页面 Vue:router-link this.$router.push(\\\"/\\\") this.$router.go(1) 代码示例: !-- 直接跳转 -- router-link to=\\\'/testC\\\'  button点击跳转2/button /router-link   !-- 带参数跳转

    2024年02月11日
    浏览(37)
  • 常见路由跳转的几种方式

    常见的路由跳转有以下四种: 1. router-link to=\\\"跳转路径\\\"  也可,如 2. this.$router.push() 跳转到指定的url,并在history中添加记录(即,点击回退,会退回上一个页面) 。 html中,如: 3. this.$router.replace() 跳转到指定的url, 但不会在history记录(即,点击回退 退回到上上个页) 4

    2024年02月10日
    浏览(32)
  • Vue路由跳转的几种方式

    跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面。 用法同上,但是跳转到指定的url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面,上一个记录是不存在的。 浏览器在解析时,将它解析成一个类似于a标签。 router-link:可以一个组

    2024年02月06日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包