背景

WARNING

前端时间移动 APP 与 h5 的一个混合式开发项目中，遇到了一个比较搞笑的 bug；刚开始有点纳闷，后来静下心来才觉得这个问题有点可笑； h5 的项目采用的 vue3 + vant3 开发的，h5 页面的顶部tabBar结构为左中右，是对 vant 的二次封装；

复盘

是一个怎样的问题？

在开发项目中，因为是混合式开发， h5 会调用原生 app 的一些方法，例如文件上传，返回上级页面，跳转 app 页面等等；

一级页面为 h5 页面, 二级页面也是 h5 页面，在二级页面返回直接跳出，直接到了 app 原生页面首页；按理说这应该返回的是一级 h5 的页面；

浏览器打开 h5 一级页面模拟 bug 复现

采用vue-router中的router.back() 和 router.go(page)方法，均在浏览器中返回的是一级页面；但是在app webview中直接跳出。执行了俩次；

使用调试手段. console日志 和 debugger 都会发现执行了俩次；

寻找问题来源

解决方案

这个问题确实是粗心造成的；不过这个 bug 的解决方案也很简单，既然知道了问题的来源，那么对于解决方案，无非以下俩点：

• 方案一： 去掉子组件自带的 api 方法 和 导出的emit
• 方案二： 那就是将emit 的 name 进行修改，不要修改和子组件一致的event name； 当然父组件的event name 要和 子组件的 emit 中的event name一致即可；