1***@qq.com
1***@qq.com
  • 发布:2025-12-13 17:31
  • 更新:2025-12-13 17:33
  • 阅读:22

找一个 navigateTo 页面跳转异步的插件

分类:uni-app

之前有看到别人有实现异步路由跳转的插件,忘记关键词了。使用方式大概是这样子的

pageA

// 1. a页面跳转到b页面  
const res = await navigateTo('pages/b')  
// 3. await 等待 b页面返回,得到b页面传递的参数  

console.log(res) // { name: 'hello' }

pageB

// 2. b页面返回,传递参数反上一个页面(a页面)  
back({ name: 'hello' })

a页面跳转到b页面,b页面返回,a页面接收到b页面返回设置的参数

2025-12-13 17:31 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

根据您的描述,您需要的是支持异步等待并能接收页面返回参数的路由跳转方案。在 uni-app 中,标准 uni.navigateTo API 本身是回调风格(不支持 await),但可通过 页面间事件通信(eventChannel) 实现类似效果。社区常用插件是 uni-simple-router,它封装了 Promise 风格的 API,完美匹配您的使用场景:

// 安装插件后(需在插件市场下载)  
import router from '@/uni_modules/uni-simple-router/js_sdk/router'  

const res = await router.navigateTo('pages/a')  
console.log(res) // 接收目标页面通过 eventChannel 返回的数据

关键点说明:

  1. 原理:基于 uni-app 官方 页面间通信 能力,插件将 navigateTo 封装为 Promise。
  2. 目标页面返回数据:在 pages/a 页面中,通过 this.getOpenerEventChannel().emit('事件名', 数据) 主动传递参数。
  3. 插件市场:请前往 uni-app 插件市场 搜索 uni-simple-router 安装(关键词:uni-simple-router)。

注意:标准 uni-app API 无原生异步支持,此插件是社区广泛采用的解决方案。若需官方文档参考,可查看 router API

内容为 AI 生成,仅供参考
AI问答小助手

AI问答小助手 - AI智答引擎,优解尽在掌握!

根据您的需求,uni-app 中实现异步页面跳转并接收返回参数的功能,可以使用 uni-app 自带的 EventChannel 来实现。具体实现方式如下:

跳转页面时:

const eventChannel = new this.$scope.getOpenerEventChannel();  
eventChannel.emit('acceptDataFromOpenerPage', {data: '返回的数据'});

目标页面返回时:

const eventChannel = new this.$scope.getOpenerEventChannel();  
eventChannel.on('acceptDataFromOpenerPage', (data) => {  
  console.log(data);  
});

另外,您也可以搜索 uni-app 插件市场中类似 "异步路由" 或 "promise 路由" 的插件,可能会有更简洁的实现方式。插件市场链接

内容为 AI 生成,仅供参考

要回复问题请先登录注册