Javascript 将尾部斜杠添加到hashchange breaks back按钮

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

$(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;

    }

});

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

这是为了防止重复的URL，如：

domain.com/#/home

和

domain.com/#/home/

但是，这会打断“后退”按钮，因为如果您尝试在哈希更新后返回，您将再次被发送，因为它会立即再次修复哈希，因此您将陷入一个无法后退的循环（除非在哈希替换发生之前按住后退按钮并选择历史记录条目）

---

关于如何解决这个问题，您有什么想法吗？

根据您需要的浏览器支持类型（例如IE<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/'。点击后退按钮n带我去“foo/”

MDN在html5浏览器历史记录方面有一些不错的文档，这些文档可能也很有用：

---

希望这对您有所帮助，具体取决于您需要哪种浏览器支持（例如IE<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/'。点击后退按钮n带我去“foo/”

MDN在html5浏览器历史记录方面有一些不错的文档，这些文档可能也很有用：

---

希望对您有所帮助一个技巧是使用

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(/\/?$/, '/'));
    }
});

---

一个技巧是使用

location.replace

来修改

哈希值，而不更改历史记录

$(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(/\/?$/, '/'));
    }
});

另外，如果你需要良好的浏览器支持，并且你愿意使用插件，这个看起来可以做到：（我没有使用它，但Modernizer在他们的文档中列出了它）此外，如果你需要良好的浏览器支持，并且你愿意使用插件，这个看起来可以做到：（我没有使用它，但Modernizer在他们的文档中列出了它）这似乎有效：）谢谢，朋友。很好地添加到您的代表。这似乎有效：）谢谢，朋友。很好地添加到您的代表。