外星人源码论坛 首页 编程经验 关于APP内嵌H5后退按钮问题

关于APP内嵌H5后退按钮问题

2018-3-5 06:52
原作者: 外星人源码网 来自: 外星人源码网 收藏 分享 邀请

最近都在用vue做APP内嵌H5页面,在APP点击后退时如果在路由中跳转过多次 点后退会后退很多次才能退出页面 用户体验很差。下面来说下解决方法 因为hisotry模式官方说需要服务器配置所以路由一直在用hash模式,针对这 ...

最近都在用vue做APP内嵌H5页面,在APP点击后退时如果在路由中跳转过多次 点后退会后退很多次才能退出页面 用户体验很差。


下面来说下解决方法
因为hisotry模式官方说需要服务器配置所以路由一直在用hash模式,针对这一需求需要了解h5新加的history模式

H5引入了history.pushState()和history.replaceState()这两个方法,他们允许添加和修改history实体。同时,这些方法会和window.onpostate事件一起工作。

pushState方法用一个新的url取代当前页面的url并把当前页面的url存进历史记录,

replaceState只用新url取代当前页面的url,但是不把当前页面的url存进历史记录

pushState()有三个参数:state对象,标题字符串(现在没有浏览器支持),URL字符串(可选,如果为空,设置为当前页面的url)

只有前进后退可以触发popstate事件,对于不是通过pushState,replaceState两个方法产生的url,state对象为空
所以首先监听一下popstate事件在监听事件里直接调回退的方法

  window.addEventListener("popstate", function(e) {
    window.history.back()
  }, false);

这样就可以直接退出当前页面了

还要history在服务器端渲染不出来的问题 前端其实也可以用一种笨方法解决的

把你服务器的地址直接卸载路由里,根路径要把你页面的名字带上,就像这样

因为在APP里所以也不存在刷新页面找不到的问题,就不需要服务端来帮忙啦~
希望可以帮到有类似需求的小伙伴,有更好的方法的大神也来指导下


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

粉丝 阅读105 回复0
上一篇:
Springboot 初识 JPA发布时间:2018-03-05
下一篇:
this、apply、call和bind发布时间:2018-03-05
推荐资讯
阅读排行
国内最专业的源码技术交流社区
全国免费热线电话

0373-5171417

周一至周日9:00-23:00

反馈建议

admin@eenot.com 在线QQ咨询

扫描二维码关注我们