Как удалить символ "#" из url

У меня есть ссылка, которая ведет меня в другой раздел той же страницы, вот так:

//это раздел с id = "about"

<section class="page-section bg-primary" id="about">
</section>

//это обращение к данному идентификатору:

<a class="nav-link" href="#about">About</a>

и каждый раз, когда я нажимаю, я попадаю в этот раздел, но в строке url он отображается так: http://127.0.0.1:8000/home/#about. Я хочу, чтобы моя ссылка была чистой и отображалась так: //ссылка без "#" http://127.0.0.1:8000/home/about

Это можетбыть сделано с помощью обработчика кликов, history.pushState иперезагрузки страницы.

Это может быть сделано с помощью обработчика событий popstate и history.replaceState.

Не уверен, что это обязательно лучшее или даже жизнеспособное решение.

window.addEventListener(`popstate`, handle);

function handle(evt) {
  if (location.hash) {
    history.replaceState(null, ``, location.pathname);
  }
}

Здесь невозможно продемонстрировать в одном фрагменте, поэтому посмотрите этот стекблиц.

Это должно сработать: location.origin+location.pathname.

Вы можете прослушать изменение хэша и заменить # в строке поиска на /.

let first = true;
window.addEventListener("hashchange", () => {
    if(first)
        return (history.pushState(null, null, location.href.replace("#", "/")), first = false);
    const all = location.href.split("/");
    all[all.length - 1] = location.hash.slice(1);
    history.pushState(null, null, all.join("/"));
});

Это поведение является частью HTML. На мой взгляд, хорошо иметь хэш-маршруты. Но я не знаю вашей проблемы. Как бы то ни было. Простым решением было бы слушать якоря и удалять # после щелчка.

const anchors = document.querySelectorAll(".nav-link");
anchors.forEach(a => {
  a.addEventListener("click", () => {
    console.log("remove # from: ", window.location.href)
    window.location.href.split('#')[0]
    return false;
  })
})
Вернуться на верх