当前位置：首页 > uni-app

uniapp跳转详情页

2026-02-06 18:19:46uni-app

uniapp跳转详情页的方法

在uniapp中实现页面跳转有多种方式，可以根据不同场景选择合适的方法。

使用navigateTo方法

uni.navigateTo是最常用的跳转方式，保留当前页面并跳转到新页面。适用于需要返回上一页的场景。

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

使用redirectTo方法

uni.redirectTo关闭当前页面并跳转到新页面。适用于不需要返回的场景。

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

使用switchTab方法

跳转到tabBar页面，并关闭其他非tabBar页面。适用于底部导航栏切换。

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

使用reLaunch方法

关闭所有页面并打开新页面。适用于重新加载应用的场景。

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

传递参数的方式

通过URL拼接参数传递数据：

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

在详情页接收参数：

onLoad(options) {
    console.log(options.id); // 123
    console.log(options.name); // test
}

使用EventChannel通信

适用于需要双向通信的场景：

uni.navigateTo({
    url: '/pages/detail/detail',
    success: function(res) {
        res.eventChannel.emit('sendData', {data: 'test data'});
    }
});

详情页接收：

onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('sendData', function(data) {
        console.log(data); // {data: 'test data'}
    });
}

注意事项

页面路径需要在pages.json中配置
跳转路径前需要加斜杠/
参数传递大小有限制，大数据建议使用全局变量或缓存
H5端URL长度有限制，避免传递过多参数

页面返回的处理

返回上一页

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

返回并传递数据

前页监听事件：

onShow() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('returnData', function(data) {
        console.log(data);
    });
}

详情页返回时触发：

uniapp跳转详情页

uni.navigateBack({
    delta: 1,
    success: function() {
        const eventChannel = uni.getOpenerEventChannel();
        eventChannel.emit('returnData', {data: 'return value'});
    }
});

这些方法覆盖了uniapp中页面跳转和通信的主要场景，可以根据具体需求选择合适的方式实现详情页跳转功能。