uniapp怎么实现页面跳转并传值

uniapp页面跳转并传值的实现

在uniapp中，我们可以使用uni.navigateTo()、uni.redirectTo()等函数实现页面的跳转。如果需要在页面之间传递参数，则可以在跳转函数中传递参数。下面我们来详细介绍uniapp页面跳转并传值的实现方法。

uni.navigateTo()函数的使用

uni.navigateTo()函数用于保留当前页面，跳转到应用内的某个页面。通过这个函数可以在跳转时传递参数。下面是一个示例。

//跳转到某个页面
uni.navigateTo({
    url: '/pages/test?id=1&name=uniapp',
    success: function () {
        console.log('跳转成功');
    }
});

在跳转时，我们可以在url参数中传递参数。上面的示例传递了两个参数，一个是id，一个是name。在接收参数时，我们需要使用uni.getStorageSync()函数获取传递过来的值。代码如下：

//接收参数
var pages = getCurrentPages(); //获取当前页面
var prevPage = pages[pages.length - 2]; //获取上一页
var id = prevPage.options.id; //获取上一页传递过来的id
var name = prevPage.options.name; //获取上一页传递过来的name
console.log('id：' + id);
console.log('name：' + name);

实现的效果如下图所示：

uni.redirectTo()函数的使用

uni.redirectTo()函数用于关闭当前页面，跳转到应用内的某个页面。通过这个函数也可以在跳转时传递参数。下面是一个示例。

//跳转到某个页面
uni.redirectTo({
    url: '/pages/test?id=1&name=uniapp',
    success: function () {
        console.log('跳转成功');
    }
});

在跳转后，我们同样需要使用uni.getStorageSync()函数获取传递过来的值。代码如下：

//接收参数
var pages = getCurrentPages(); //获取当前页面栈
var prevPage = pages[pages.length - 2]; //获取上一页
var id = prevPage.options.id; //获取上一页传递过来的id
var name = prevPage.options.name; //获取上一页传递过来的name
console.log('id：' + id);
console.log('name：' + name);

实现的效果如下图所示：

uni.reLaunch()函数的使用

uni.reLaunch()函数用于关闭所有页面，打开应用内的某个页面。同样，我们也可以在跳转时传递参数。下面是一个示例。

//跳转到某个页面
uni.reLaunch({
    url: '/pages/test?id=1&name=uniapp',
    success: function () {
        console.log('跳转成功');
    }
});

在跳转后，我们同样需要使用uni.getStorageSync()函数获取传递过来的值。代码如下：

//接收参数
var pages = getCurrentPages(); //获取当前页面栈
var prevPage = pages[pages.length - 1]; //获取上一页
var id = prevPage.options.id; //获取上一页传递过来的id
var name = prevPage.options.name; //获取上一页传递过来的name
console.log('id：' + id);
console.log('name：' + name);

实现的效果如下图所示：

总结

通过上述介绍，我们可以使用uni.navigateTo()、uni.redirectTo()、uni.reLaunch()函数实现页面的跳转，并且可以在跳转时传递参数。在接收参数时，我们需要使用uni.getStorageSync()函数获取传递过来的值。使用这种方法，可以方便地在页面之间传递参数，实现数据共享。