javascript - 将尾部斜杠添加到 hashchange 中断后退按钮

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/

但是这会破坏后退按钮，因为如果您在哈希值更新后尝试返回，您最终将再次被向前发送，因为它会立即再次修复哈希值，因此您最终将陷入 NEVER 的循环能够后退(除非您按住后退按钮并在哈希替换发生之前选择历史记录条目)。

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

Answer 1

一个技巧是使用 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(/\/?$/, '/'));
    }
});