Question

我的应用程序中有以下代码：

$(window).hashchange( function(){

    console.log('hashchange event');

    var hash = window.location.hash;

    var lastChar = hash.substr(-1);

    if(lastChar != '/') {

        // Add trailing slash
        hash = hash.replace(/\/?$/, '/');

        // Update the hash
        window.location.hash = hash;

    }

});

如果用户试图弄乱页面的散列或者使用不同的散列请求页面并且没有尾部斜杠，那么它将自动添加一个并更新散列。

这是为了防止重复的网址：domain.com/#/home和domain.com/#/home/

然而，这会打破后退按钮，因为如果您尝试在哈希更新后返回，您将最终再次向前发送，因为它会立即再次修复哈希，因此您将最终处于循环中能够退后一步（除非您按住后退按钮并在发生哈希替换之前选择历史记录条目。）

关于如何解决这个问题的任何想法？

Answer 1

一个技巧是使用location.replace修改hash而不更改历史记录。

$(window).on("hashchange", function() {
    console.log('hashchange event');
    var hash = location.hash,
        lastChar = hash[hash.length - 1];
    if(lastChar !== '/') {
        // Update the hash without changing history
        location.replace(location.href.replace(/\/?$/, '/'));
    }
});

Answer 2

根据您需要的浏览器支持类型（例如IE＆lt; 10），您可以尝试使用history.replaceState。以下代码在控制台中为我工作：

$(window).on('hashchange', function(){

    console.log('hashchange event');

    var hash = window.location.hash;

    var lastChar = hash.substr(-1);

    if(lastChar != '/') {

        // Add trailing slash
        hash = hash.replace(/\/?$/, '/');

        // Update the hash
        history.replaceState({}, 'hashchange', hash)

    }

});

例如，如果我使用你之前的代码window.location.hash ='foo'，我会看到两个hashchange事件，然后就像你说的浏览器后退按钮将不再起作用。使用replaceState，我只看到一个hashchange事件，哈希将成为'foo /'。然后，如果我尝试再次将哈希值更改为“bar”，我将获得“bar /”。点击后退按钮将我带到'foo /'。

MDN在html5浏览器历史记录中有一些很好的文档也很有帮助：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

希望有所帮助

添加尾部斜杠到hashchange中断按钮

2 个答案: