Если я правильно понял, вы хотите, чтобы index.html загружал все данные, после изменения url, при этом ваша страница не должна перезагружаться, , а если её перезагрузили, то все равно должен подгрузиться index.html и вывести результат согласно url.
1. Настройка веб сервера. Вам нужно на сервере свести все запросы на index.html, кроме api запросов. в apache это можно сделать в htaccess, а в boo spring в spring security. в других не знаю как.
2. Добавить событие, которое будет ждать клик на ссылку и перехватывать действие по умолчанию.
3. Написать функцию, которая будет принимать данные с значения в событии и в зависимости от значения вызывать нужный контент на страницу.
4. Назначить отслеживание изменения адресной строки.
5. Где-то в коде произвести один раз функцию вне события клика, чтобы после перезагрузки страницы вызвался тот контент, который отвечает адресу в адресной строки.
Помните, что без веб сервиса будет всё плохо в таком варианте.
Если вы адресную строку не будете использовать, то вам и не нужно как-то настраивать веб сервер, ведь всё это будет крутиться в рамках одной страницы.
Как примерно должен выглядеть код.
// функция роутенга
function router(url) {
fetch(url+".html").then((data) => {
return data.text();
}).then((response) => {
document.getElementById("content").innerHTML = response;
}).catch((error) => {});
}
// событие слушающее клик.
document.addEventListener("click", (event) => {
if (event.target.tagName=="a") {
// перехват и остановка действий по умолчанию.
event.preventDefault();
// отправляем url в роутенг.
router(event.target.getAttribute("href"));
}
});
// Еще не забыть устроить изменение url в браузере.
Такой вариант очень сырой, но его можно доработать и он будет отлично выполнять задачу.
Совет, изменение url в браузере лучше сделать внутри функции router(), в том месте, где добавляется контент в страницу.
Тем самым вы сделаете так, что url изменится когда код точно будет знать, что контент реально есть.
