浏览器历史记录整理

     最近在做一个功能app内嵌h5页面，从B返回A时，在A页面点击返回需要跳转到app项目的页面。

想到了两个解决方案：

1. 当页面跳转到A页面时，清除浏览器的历史记录，此时点击返回时，app发现h5没有历史记录会直接跳转到app页面

2. 当页面跳转至首页时，监听返回事件，通知app，app调用函数直接跳转至app页面

第一个方案

我们先看看浏览器history原理

从A页面一步步跳转至D页面，然后从D页面返回到C页面，这时你会发现只是指针移动到了C页面，history的length并不会减少，从C页面跳转至E页面时，E页面会把D页面直接替换掉。

如果采用history.go(-(history.length-1))的话会存在一个问题，history的第一个页面并不一定时我们想要的A页面，这个方案失败。

第二个方案

采用监听popstate方法，从而通知app去跳转，这个方案对目前的项目来说比较适合。

我们的项目用vue写的，所以使用的方法如下

mounted() {
  if(window.history && window.history.pushState) {      history.pushState(null, null, document.URl);      window.addEventListener('popstate', this.goBack, false);  }}

destroyed(){
   window.removeEventListener('popstate', this.goBack, false);
}

goBack() {   let isCdelApp = $Cookies.get('cdelApp');   if (isCdelApp) {      //在这里通知app即可   } else {      return;   }
}