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

推荐答案

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

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

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

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

   -- -------------------- ---- -------
   -- - ------- --- ----------
   ----------- -
       --------- ----
   -
   
   -- ------ ----------
   ---------------------------- - - --- ---- ----- ------ --
   
   -- -------- ----------
   ----- -------- - -----------------------------

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 生命周期函数获取这些参数。

-- -------------------- ---- -------
-- -- -
----------------
    ---- ---------------------------------------
---

-- -- -
--------------- -
    ------------------------ -- -- ---
    -------------------------- -- -- ----
-

全局变量

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

-- -------------------- ---- -------
-- -------
----------- -
    --------- ----
-

-- -- -
---------------------------- - - --- ---- ----- ------ --

-- -- -
----- -------- - -----------------------------
---------------------- -- -- - --- ---- ----- ------ -

事件总线

事件总线适用于需要跨页面通信的场景。通过 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 中实现页面之间的参数传递，开发者可以根据具体需求选择合适的方式。