如何在页面之间传递参数？

推荐答案

在 uni-app 中，页面之间传递参数可以通过以下几种方式实现：

1. URL 传参：通过 navigateTo 或 redirectTo 等路由跳转方法，在 URL 中携带参数。

   uni.navigateTo({
       url: '/pages/detail/detail?id=123&name=test'
   });

2. 全局变量：使用 Vuex 或 globalData 存储数据，在目标页面中读取。

   // www.javascriptcn.com code example
   // 在 app.vue 中定义 globalData
   globalData: {
       userInfo: null
   }
   
   // 在页面中设置 globalData
   getApp().globalData.userInfo = { id: 123, name: 'test' };
   
   // 在目标页面中读取 globalData
   const userInfo = getApp().globalData.userInfo;

3. 事件总线：通过 uni.$emit 和 uni.$on 实现跨页面通信。

   // 在页面 A 中发送事件
   uni.$emit('updateData', { id: 123, name: 'test' });
   
   // 在页面 B 中监听事件
   uni.$on('updateData', (data) => {
       console.log(data);
   });

4. 本地存储：使用 uni.setStorageSync 和 uni.getStorageSync 存储和读取数据。

   // 在页面 A 中存储数据
   uni.setStorageSync('userInfo', { id: 123, name: 'test' });
   
   // 在页面 B 中读取数据
   const userInfo = uni.getStorageSync('userInfo');

本题详细解读

URL 传参

URL 传参是最常见的方式，适用于简单的参数传递。通过 navigateTo 或 redirectTo 方法跳转页面时，可以在 URL 中携带参数。目标页面可以通过 onLoad 生命周期函数获取这些参数。

// www.javascriptcn.com code example
// 页面 A
uni.navigateTo({
    url: '/pages/detail/detail?id=123&name=test'
});

// 页面 B
onLoad(options) {
    console.log(options.id); // 输出 123
    console.log(options.name); // 输出 test
}

全局变量

全局变量适用于需要在多个页面之间共享数据的场景。globalData 是 uni-app 提供的一个全局数据存储对象，可以在 app.vue 中定义，并在任何页面中访问和修改。

// www.javascriptcn.com code example
// app.vue
globalData: {
    userInfo: null
}

// 页面 A
getApp().globalData.userInfo = { id: 123, name: 'test' };

// 页面 B
const userInfo = getApp().globalData.userInfo;
console.log(userInfo); // 输出 { id: 123, name: 'test' }

事件总线

事件总线适用于需要跨页面通信的场景。通过 uni.$emit 发送事件，uni.$on 监听事件，可以实现页面之间的数据传递。

// 页面 A
uni.$emit('updateData', { id: 123, name: 'test' });

// 页面 B
uni.$on('updateData', (data) => {
    console.log(data); // 输出 { id: 123, name: 'test' }
});

本地存储

本地存储适用于需要持久化数据的场景。通过 uni.setStorageSync 和 uni.getStorageSync 可以在页面之间传递数据，并且数据会持久化存储在本地。

// 页面 A
uni.setStorageSync('userInfo', { id: 123, name: 'test' });

// 页面 B
const userInfo = uni.getStorageSync('userInfo');
console.log(userInfo); // 输出 { id: 123, name: 'test' }

通过以上几种方式，可以在 uni-app 中实现页面之间的参数传递，开发者可以根据具体需求选择合适的方式。