设置hash后导致的返回问题的解决方案

      引: 通常，在写移动端页面的时候，如果遇上很多需要切换的tab，比如切换城市／类目等，都会发起一次异步的请求，请求数据加载出来后，当点击某个具体的产品后，页面将会跳转到一个新的地方，我们希望用户在浏览完这个产品之后，可以返回到原来的地方，而返回的地方是上一次用户选择的条件的页面－－－这时候，hash就排上用场了。

设置hash：

　　设置hash的方法很简单。通过window.location.hash可以获取到url上的hash值，也可以通过赋值动态地给hash赋值，代码可以如下

var hash  = window.location.hash.slice(1);

　　由于通过window.location.hash获取到的hash是"#xxx"的格式，所以要获取hash的具体值可以通过字符截取，通过slice可以实现。

　　ps：hash值的设置有以下几种集中方式，如果hash是number型，可以不需要带＃，如果设置字符串，也可以不加＃，但是如果加上＃就一定要按照字符串来设置。如以下几种都是正确的设置hash的方式

window.location.hash = 1111;  //number型
window.location.hash = "1111"; //string型，不加#
window.location.hash = "#1111" ;//string型，加＃

存在的问题：

　　当你在一个页面中无刷新的情况下，通过脚本（js）频繁地设置了hash值，你会发现，返回的时候，返回到你设置的上一次hash的地址，但是页面并没有刷新，这时候，你会发现这并不是你想要的（这种恶心的结果在你设置了很多次hash的情况下尤为恶心），你可能想回到的是从某个地方跳转过来的地方。这时候，可以通过document.location.replace强行把hash历史去掉，实现想要的功能。

　　

getFilterUrl: function(hash) {
        return document.location.protocol + '//' + document.location.host + document.location.pathname + document.location.search + '#' + hash;
}

　　然后，使用的时候可以这样：

var hash = "xxxx"; //这个hash自己通过具体的需求设置
document.location.replace(this.getFilterUrl(hash));
  

　　如此这般，就可以解决页面返回的业务需求。

 

　　

转载于:https://www.cnblogs.com/calvinjs/p/4928660.html