如何使用UniApp实现页面跳转和数据传递？

王小婷

发布于 2025-05-25 16:00:24

1.2K0

文章被收录于专栏：编程微刊编程微刊

在 UniApp 中，页面跳转和数据传递是基本的功能，允许用户在应用中浏览不同的页面并传递必要的信息。以下是如何实现页面跳转和数据传递的详细步骤和示例。

一、页面跳转

UniApp 提供了几种方式来进行页面跳转，主要包括：

uni.navigateTo：用于打开新页面并保留当前页面。
uni.redirectTo：关闭当前页面并打开新页面。
uni.switchTab：用于切换到一个 tabBar 页面。
uni.reLaunch：关闭所有页面并打开一个新页面。

1.1 `uni.navigateTo`

使用 uni.navigateTo 方法打开新页面：

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

在这个例子中，url 参数指定了要跳转到的页面路径，同时可以通过 URL 参数传递数据（如 id=123）。

1.2 `uni.redirectTo`

使用 uni.redirectTo 方法关闭当前页面并打开新页面：

uni.redirectTo({
  url: '/pages/home/home'
});

1.3 `uni.switchTab`

如果需要跳转到 tabBar 页面，可以使用 uni.switchTab：

uni.switchTab({
  url: '/pages/index/index'
});

1.4 `uni.reLaunch`

使用 uni.reLaunch 关闭所有页面并打开一个新页面：

uni.reLaunch({
  url: '/pages/login/login'
});

二、数据传递

在 UniApp 中，数据可以通过 URL 参数或全局状态管理（如 Vuex）来传递。

2.1 通过 URL 参数传递数据

在页面跳转时，通过 URL 参数传递数据。接收页面可以在 onLoad 生命周期函数中获取这些参数。

跳转页面：

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

接收页面（detail.vue）：

<template>
  <view>
    <text>用户ID: {{ userId }}</text>
    <text>用户名: {{ userName }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: '',
      userName: '',
    };
  },
  onLoad(options) {
    this.userId = options.id; // 获取 URL 参数 id
    this.userName = options.name; // 获取 URL 参数 name
  },
};
</script>

2.2 通过 Vuex 传递数据

在复杂的应用中，可以使用 Vuex 来管理全局状态，实现不同页面之间的数据共享。

创建 Vuex store（store.js）：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: {
      id: '',
      name: '',
    },
  },
  mutations: {
    setUser(state, payload) {
      state.user.id = payload.id;
      state.user.name = payload.name;
    },
  },
});

export default store;

在跳转页面中设置数据：

// 在跳转前设置用户数据
this.$store.commit('setUser', { id: '123', name: 'John' });
uni.navigateTo({
  url: '/pages/detail/detail'
});

在接收页面（detail.vue）中获取数据：

<template>
  <view>
    <text>用户ID: {{ user.id }}</text>
    <text>用户名: {{ user.name }}</text>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['user']),
  },
};
</script>

三、总结

在 UniApp 中，页面跳转和数据传递是非常灵活的。通过 URL 参数，可以轻松传递简单的数据；而使用 Vuex，可以在复杂的应用中实现全局状态管理，方便数据的共享和维护。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

text