详细介绍UniApp页面跳转传值的方法

简介

在UniApp中使用页面跳转传值的方法有多种，包括路由传参、localStorage、vuex等。本篇文章将详细介绍UniApp中页面跳转传值的几种方式。

路由传参

在UniApp中使用路由传参的方法和Vue中使用路由传参方法类似。通过router.navigateTo和router.redirectTo方法可以传递参数。通过获取参数对象或参数字符串，我们可以获取传递过来的参数。

// 第一个页面跳转到第二个页面，传递参数
uni.navigateTo({
    url: '/pages/second/second?id=123&name=abc'
});

// 在第二个页面获取参数
export default {
    onLoad(options) {
        console.log(options.id); // 123
        console.log(options.name); // abc
    }
}

LocalStorage

LocalStorage是一种本地存储方案，将数据保存在用户本地，以便在同一浏览器中进行共享。在UniApp中使用LocalStorage方法可以实现跨页面传递数据。这种方法适用于传输小型数据。

// 第一个页面设置数据
uni.setStorageSync('key', 'value');

// 第二个页面获取数据
let value=uni.getStorageSync('key');
console.log(value) // value

vuex

vuex是一个专为Vue.js应用程序开发的状态管理模式。在UniApp中使用vuex可以实现全局共享状态管理。我们可以存储全局数据和状态，也可以在不同的页面中调用这些数据和状态。

// 引入vuex
import store from '@/store';

// 第一个页面设置数据
store.commit('setData', 'value');

// 第二个页面获取数据
console.log(store.state.data); // value

总结

UniApp提供了多种页面跳转传值方式，包括路由传参、LocalStorage、vuex等。在实际开发中，我们需要根据具体情况选择合适的方法。如果传输数据大小不是很大，我们可以使用LocalStorage；如果需要全局共享数据和状态，我们可以使用vuex。