uniapp 页面调用

uniapp 页面调用的方法

在 uniapp 中，页面调用通常涉及页面跳转、传参、通信等操作。以下是几种常见的页面调用方式：

页面跳转

使用 uni.navigateTo 进行页面跳转，保留当前页面并打开新页面：

uni.navigateTo({
    url: '/pages/detail/detail'
});

使用 uni.redirectTo 关闭当前页面并跳转到新页面：

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

页面传参

通过 URL 传递参数，目标页面可通过 onLoad 接收：

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

// 目标页面接收参数
onLoad(options) {
    console.log(options.id); // 输出 1
    console.log(options.name); // 输出 test
}

页面通信

使用 uni.$emit 和 uni.$on 实现页面间通信：

// 页面 A 发送事件
uni.$emit('update', {data: 'new data'});

// 页面 B 接收事件
uni.$on('update', (data) => {
    console.log(data); // 输出 {data: 'new data'}
});

返回上一页

使用 uni.navigateBack 返回上一页：

uni.navigateBack({
    delta: 1 // 返回的层数
});

预加载页面

使用 uni.preloadPage 预加载页面，提升用户体验：

uni.preloadPage({
    url: '/pages/detail/detail'
});

注意事项

• 页面路径需在 pages.json 中配置。
• 跳转路径支持相对路径和绝对路径。
• 传参时需注意 URL 长度限制，复杂数据建议使用全局变量或缓存。