一开始,我使用的是hash值,也就是在页面链接的后面,使用window.location.hash根据不同的index添加hash值,这就导致在用户点击浏览器的返回按钮的时候会一一返回前一个hash值得页面,但是需求是在用户点击浏览器得返回键得时候得要返回进到订单列表页得前一个页面。
那一开始我想得办法是:通过监听onpopstate事件,然后触发这个事件得时候,回到前一个页面去。但是,问题来了,当我点击订单列表的tab键的时候,chrome浏览器会自动触发了onpopstate事件,这就导致我随便点击任意一个tab键的时候,都会返回到前一个页面去。
产生这个问题的原因是: 因为hash值会导致当前页面的url发生了改变,就像点击了链接一样。
image.png
于是,后边,我使用查询字符串(url?hash=index)的形式来做,这样当前页面的url就不会更改,虽然参数在变化。
最后点击浏览器的返回键的时候,也会返回到前一个页面而不是前一个hash值得页面。
replaceState(null, null, url)方法使用
网友评论