问题描述

浏览器用的chrome，使用vue全家桶开发的单页面应用，有些页面在手动刷新时history会被push进同样的记录。
导致多次刷新页面后，调用$router.back()或者history.back()时需要调用好几次才能回退到上个页面。



本来刷新应该不会增加history的记录，项目中某些页面就会出现这种情况，刷新一次就会增加一条。
但是有些页面就没这种现象，具体原因也没有查到。

解决方式

1.可以把上一个页面的地址当作参数传递给当前页，点击回退按钮时调用$router的replace方法退到上一页。这样要修改2个页面的代码，耦合性很强。

2.在当前页的created生命周期中加入一段代码

created() { 
   
   window.addEventListener('pageshow', ()=> { 
   
      history.go(-1)
    })
},

pageshow事件是在页面刷新成功后触发的，history.go(-1)相当于变相的删除了当前历史记录，因为api里是没有删除功能的。
这样不论你刷新了多少次页面，history的length还是刚打开此页面的值。
当你调用history.back()或者this.$router.back()时，调用一次就可以回退到上个页面了。
这个监听器也不需要手动移除，因为它只在刷新时触发，而每次刷新时监听器就已经被移除了。
这样写法是完全解耦的，只需要在出问题的页面增加就行了。

结论

方法并没有从根本上解决问题，对比了那些会出现此问题的页面，也没有发现区别，还望懂的同学解答一下。

今天的文章浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法分享到此就结束了，感谢您的阅读。