uniapp页面参数传递

uniapp页面参数传递

admin2019-04-09 【Uni-App】 1299人已围观

简介uniapp传递参数,和获取参数。

首先 链接传递 或者事件传递

1、要传递参数的页面
 


<navigator :url=" './nav?index='+navData">点击传递参数</navigator>
 



2、接收的页面
 


        onLoad(options) {
            console.log(options。index)
        }
 




事件传递多个参数,传递数组用事件来传递,因为要先转成字符串

1、在页面中定义要传递
 


        <button @click="dataClick">点击传递数据</button>


添加一个事件

        methods: {
            dataClick(){
                let that = this;
                var navData = JSON.stringify(that.navData); // 这里转换成 字符串
                uni.navigateTo({
                    url:'./nav?index='+navData
                })
            }

        },
 



2、接收的页面
 


这里一定onLoad ,只能用onLoad才能接收到参数
        onLoad(options) {
            var data = JSON.parse(options.index); // 字符串转对象
            console.log(data)
        }
 

UniApp 中,可以使用路由参数传递来在页面之间传递数据。UniApp提供了多种传递参数的方式,下面列举了几种常用的方法: 1. Query 参数传递: 在 `uni.navigateTo` 或 `uni.redirectTo` 方法中,可以通过 `url` 参数携带 Query 参数来传递数据。示例代码如下: ```javascript uni.navigateTo({ url: '/pages/detail?id=1&name=example' }); ``` 在目标页面中,可以通过 `this.$route.query` 或 `uni.getStorageSync` 方法来获取 Query 参数的值。 2. URL 传参: 在 `uni.navigateTo` 或 `uni.redirectTo` 方法中,可以通过在 URL 中拼接参数来传递数据。示例代码如下: ```javascript uni.navigateTo({ url: '/pages/detail/1' }); ``` 在目标页面的 `pages.json` 中配置路由时,可以使用动态路由来匹配 URL 参数。例如: ```json { "path": "/pages/detail/:id", "style": { "navigationBarTitleText": "详情页" } } ``` 在目标页面中,可以通过 `this.$route.params` 或 `uni.getStorageSync` 方法来获取 URL 参数的值。 3. Storage 传参: 使用 `uni.setStorageSync` 方法将数据存储在本地缓存中,然后在目标页面中使用 `uni.getStorageSync` 方法来获取存储的数据。示例代码如下: 在当前页面: ```javascript uni.setStorageSync('data', { id: 1, name: 'example' }); uni.navigateTo({ url: '/pages/detail' }); ``` 在目标页面: ```javascript const data = uni.getStorageSync('data'); console.log(data); ``` 以上是几种常用的 UniApp 路由参数传递方式。根据实际需求,选择合适的方式来传递数据。在目标页面中,可以通过 `this.$route.query`、`this.$route.params` 或 `uni.getStorageSync` 方法来获取传递的参数值。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值