uni-app系列:uni.navigateTo传值跳转

news2024/12/23 5:35:08

在这里插入图片描述

文章目录

- - 1. 使用URL参数
  - 2. 使用页面栈
  - 注意事项：
  - uni.navigateTo API 参数
  - 详细说明
  - 回调函数参数

在uni-app中，如果想要通过uni.navigateTo方法跳转到另一个页面并传递参数，可以使用页面路由的URL参数或者页面栈的方式来传递。但是，请注意，uni.navigateTo不会替换当前页面，而是将当前页面入栈，并跳转到应用内的某个页面。这意味着可以通过页面栈返回之前的页面。

以下是两种常用的传值方式：

1. 使用URL参数

可以将要传递的参数附加到目标页面的URL上。然后在目标页面中通过this.$route.query来获取这些参数。

示例：

发送页面（Page A）:

uni.navigateTo({
    url: '/pages/targetPage/targetPage?param1=value1&param2=value2'
});

接收页面（Page B，即targetPage）:

export default {
    onLoad(query) {
        // query对象包含了页面跳转所带来的参数
        console.log(query.param1); // 输出: value1
        console.log(query.param2); // 输出: value2
    }
}

2. 使用页面栈

虽然uni.navigateTo本身并不直接支持通过页面栈传递数据，但可以使用uni.setStorageSync或uni.setStorage将数据存储到本地缓存中，然后在目标页面中通过uni.getStorageSync或uni.getStorage来获取。

示例：

发送页面（Page A）:

// 存储数据到本地缓存
uni.setStorageSync('myKey', 'myValue');

// 然后跳转到目标页面
uni.navigateTo({
    url: '/pages/targetPage/targetPage'
});

接收页面（Page B，即targetPage）:

export default {
    onLoad() {
        // 从本地缓存中获取数据
        let value = uni.getStorageSync('myKey');
        console.log(value); // 输出: myValue
    }
}

注意事项：

使用URL参数时，参数长度有限制，且不建议传递大量数据或敏感数据。
使用本地缓存时，要确保数据的安全性，并在适当的时候清理缓存以避免数据泄露或占用过多存储空间。
如果你要传递复杂的数据结构（如对象或数组），可能需要先将它们转换为JSON字符串，然后在目标页面中再解析回来。
在某些情况下，可能需要使用uni.redirectTo或uni.reLaunch来替换当前页面或重新加载应用，具体取决于你的需求。
uni.navigateTo 是 uni-app 框架中用于页面跳转的一个 API。当使用这个 API 进行页面跳转时，你通常可以传递一些参数来控制跳转的行为或者向目标页面传递数据。以下是与 uni.navigateTo 相关的所有可能的数据值或参数：

uni.navigateTo API 参数

uni.navigateTo({
    url: '页面路径', // 目标页面的路径，可以带参数
    success?: Function, // 接口调用成功的回调函数
    fail?: Function, // 接口调用失败的回调函数
    complete?: Function // 接口调用结束的回调函数（调用成功、失败都会执行）
});

详细说明

url:
- 这是 uni.navigateTo 的主要参数，指定了要跳转到的目标页面的路径。
- 路径后可以带参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如：path?key1=value1&key2=value2。
- 参数会被传递到目标页面的 onLoad 函数中，作为 query 参数的一部分。