uni-app 页面跳转方式 + 传参

1、uni.navigateTo
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

2、uni.redirectTo
关闭当前页面,跳转到应用内的某个页面。

3、uni.reLaunch
关闭所有页面,打开到应用内的某个页面。

4、uni.switchTab
如果页面需要跳转到 tabBar 页面使用uni.switchTab,此方法会关闭其他所有非 tabBar 页面。

5、uni.navigateBack
({
    delta: 1, //返回层数,2则上上页
})
关闭当前页面,页面跳转,防止重复

6、uni.preloadPage
预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。


传递单个参数
uni.navigateTo({ url: '/subPackagesB/pages/cart/goSettlement?id=' + item.id});
传递多个参数
uni.navigateTo({ url: '/subPackagesB/pages/cart/goSettlement?id=' + item.id + '&type=' + item.type });

需要接收的页面通过 onLoad生命周期中接收到传递过来的参数
onLoad(option){
console.log('上一个页面传递过来的参数', option)
}

传递数组或者对象
如果需要传递的参数有很多的时候,由于uniapp 跳转页面api 的 url 有长度的限制,那么我们需要使用以下方式进行数据的传递;
// item 为该列表的每一项的数据对象;encodeURIComponent 为uniapp 提供的api
getDetails(item) {
    uni.navigateTo({
        url: `getDetails?item=${encodeURIComponent(JSON.stringify(item))}`,
    });
}

// 同样的在onLoad 生命周期中进行接收, decodeURIComponent 为uniapp 提供的api
onLoad(option) {
    const item = JSON.parse(decodeURIComponent(option.item));
    console.log('上一个页面传递过来的参数对象',item );
    // 接下来就是你需要该对象数据做些什么,当然这里你可以直接赋值给data绑定的数据
    this.objData = item;
}

你可能感兴趣的:(uni-app 页面跳转方式 + 传参)