Добавить косую черту 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/

Однако это ломает кнопку назад, потому что если вы попытаетесь вернуться ПОСЛЕ хэш был обновлен, вы будете в конечном итоге направляется вперед снова, потому что будет немедленно исправлять хэш, чтобы вы оказались в цикле НИКОГДА не могли отступить (если вы не удерживаете кнопку «Назад» и не выбираете запись истории, ПЕРЕД заменой замены хэша).

Любые идеи о том, как я мог обойти это?

Answer 1

В зависимости от того, какую поддержку браузера вам нужно (например, 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 события, тогда как вы сказали, что браузер назад кнопка больше не будет работать. С заменойState я вижу только одно событие hashchange, и хеш станет «foo /». Затем, если я попробую снова изменить хэш на «bar», я получу «bar /». Нажатие кнопки «Назад» приводит меня к «foo /».

MDN имеет некоторые интересные документы по истории html5 браузера вещи, которые могли бы быть полезны также: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Надежда, что помогает

Answer 2

Один трюк заключается в использовании 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(/\/?$/, '/')); 
    } 
});