文章目录

  • uniapp日常总结--uniapp页面传值
  • 1. URL参数传递：
  • 2. 使用页面参数（Query）：
  • 3. Vuex状态管理：
  • 4. 使用本地存储（Storage）：
  • 5. 事件总线：
  • 6. 应用全局对象：


1. URL参数传递：

可以通过在跳转链接中添加参数，然后在目标页面通过this.$route.params或this.$route.query来获取传递的参数。

<!-- 跳转页面 -->
<uni-link :url="'/pages/targetPage/targetPage?param1=' + value1 + '¶m2=' + value2">跳转到目标页面</uni-link>
// 在目标页面获取参数
export default {
  mounted() {
    const param1 = this.$route.params.param1;
    const param2 = this.$route.params.param2;
    console.log(param1, param2);
  }
}

2. 使用页面参数（Query）：

  1. 在触发页面跳转的地方，例如在一个按钮的点击事件中：
// 在当前页面的某个事件触发时跳转到目标页面，并传递参数
uni.navigateTo({
  url: '/pages/targetPage/targetPage',
  // 传递的参数，可以是一个对象
  success(res) {
    console.log(res);
  },
  fail(err) {
    console.error(err);
  },
  // 参数传递方式，query 表示通过 URL 参数传递
  // params 表示通过 path 参数传递
  // 一般情况下使用 query 就可以了
  // 使用 params 时，目标页面的路径需要定义成带参数的形式
  // 如 '/pages/targetPage/targetPage/:param1/:param2'
  method: 'query',
  // 要传递的参数
  query: {
    key1: 'value1',
    key2: 'value2'
  }
});



//简写  在当前页面的某个事件触发时跳转到目标页面，并传递参数
      uni.navigateTo({
        url: '/pages/targetPage/targetPage?key1=value1&key2=value2',
      });
  1. 在目标页面中，可以通过this.$route.query来获取传递的参数：
export default {
  onLoad(query) {
    // 获取传递的参数
    const key1 = this.$route.query.key1;
    const key2 = this.$route.query.key2;

    console.log(key1, key2);
  },
  // 其他页面生命周期或方法等
};

在目标页面的onLoad生命周期中，this.$route.query可以获取到传递的参数。key1和key2就是在跳转时传递的参数。如果使用uni.switchTab方法进行页面跳转，是无法直接传递参数的。因为uni.switchTab用于跳转到 tabBar 页面，而 tabBar 页面是在底部显示的固定页面，不支持传递参数。如果需要在 tabBar 页面之间传递参数，可以考虑使用全局变量、本地存储等方式进行参数传递。

3. Vuex状态管理：

使用Vuex进行全局状态管理，可以在一个页面中修改状态，而在另一个页面中获取最新的状态。

适用于需要在多个页面之间共享数据的情况。

如果你的应用使用了Vuex，可以在一个页面的computed属性或methods中触发commit，然后在另一个页面通过this.$store.state获取值。

在第一个页面：

// 在页面中触发commit
this.$store.commit('setValue', value);

在第二个页面：

// 在另一个页面获取值
const value = this.$store.state.value;
console.log(value);

4. 使用本地存储（Storage）：

使用本地存储（localStorage或uni提供的存储API）将数据存储到本地，然后在另一个页面中读取。适用于需要持久保存数据的情况。如果数据不大，你也可以将数据存储在本地存储中，然后在目标页面读取。

其中根据使用情景可以使用同步StorageSync或者异步Storage来实现。


同步：使用uni.setStorageSync和uni.getStorageSync等方法，将数据存储在本地，然后在另一个页面读取。

// 在页面A中保存数据到本地存储
uni.setStorageSync('key', value);
// 在页面B中从本地存储中读取数据
const value = uni.getStorageSync('key');
console.log(value);

异步：使用uni.setStorage和uni.getStorage等方法，将数据存储在本地，然后在另一个页面读取。

// 在页面A中保存数据到本地存储
uni.setStorage({
  key: 'yourDataKey',
  data: yourData,
});
// 在页面B中从本地存储中读取数据
uni.getStorage({
  key: 'yourDataKey',
  success: function (res) {
 const pageData = res.data;
  },
});

5. 事件总线：

使用uni提供的API进行页面传值，如uni.$emit和uni.$on。

通过事件触发和监听的方式在页面之间传递数据。

使用Uniapp的事件总线来进行组件之间的通信。在发送组件中，使用uni.$emit触发一个自定义事件，并在接收组件中使用uni.$on监听这个事件。

在发送组件：

uni.$emit('customEvent', data);

在接收组件：

uni.$on('customEvent', (data) => {
  console.log(data);
});

6. 应用全局对象：

通过uni.$app访问应用全局对象，从而在不同页面之间共享数据。

在发送页面：

uni.$app.globalData.value = data;

在接收页面：

const value = uni.$app.globalData.value;
console.log(value);

URL参数传递对于简单的场景比较方便。Vuex适用于较大的应用状态管理。本地存储适用于需要在页面刷新后仍然保持的简单数据。事件总线方法适用于简单的组件通信。页面参数相对常用于跳转。根据具体需求和应用场景，选择合适的方式进行数据传递。不同的场景可能需要不同的方法。