当前位置: 首页 > Web前端 > HTML5

关于APP内嵌H5返回按钮的问题

时间:2023-04-05 17:57:12 HTML5

最近一直在用Vue做APP内嵌H5页面。APP点击返回的时候,如果在返回的路由中跳转多次,会返回多次才退出页面。用户体验非常差。.让我们谈谈解决方案。因为hisotry模式官方说需要配置服务器,路由一直使用hash模式。对于这个需求,你需要了解h5新的历史模式。H5引入了history.pushState()和history.replaceState()。方法,它们允许添加和修改历史实体。此外,这些方法适用于window.onpostate事件。pushState方法将当前页面的url替换为新的url并将当前页面的url保存到历史记录中,replaceState只将当前页面的url替换为新的url,不存储当前页面的urlpageintothehistoryrecordpushState()有三个参数:state对象,title字符串(目前浏览器不支持),url字符串(可选,如果为空,设置为当前页面的url)只有forward和backward才能触发popstate事件,对于没有通过pushState,replaceState这两个方法生成的url,state对象为空,所以先监听popstate事件,直接调用fallback方法window.addEventListener("popstate",function(e){window.history.back()},false);这样就可以直接退出当前页面,也可以用笨办法解决服务端无法渲染历史的问题。你的服务器地址可以在路由中直接卸载,根路径应该包含你的页面名称,就这样吧,因为是在APP里,所以不存在刷新页面找不到的问题,所以不用服务器帮忙~希望能帮到有类似需求的朋友,以及有更好方法的大神也会指导下