Как я могу быть уверен, что все мои ссылки в моем SPA удерживают пользователя в моем SPA? ⇐ Php

[Anonymous]

Недавно я начал работать над своим первым SPA. Сейчас там есть базовый JavaScript и PHP. В любом случае, самая большая проблема, с которой я сейчас сталкиваюсь, заключается в том, как я могу разместить ссылки внутри своего SPA, чтобы они не отправляли меня на совершенно новую страницу и, по сути, не разрушали всю цель превращения моего веб-сайта в приложение. Вот мой код. Я объясню больше позже.
index.php

Код: Выделить всё

document.addEventListener('DOMContentLoaded', () => {
// Function to load content into the main-content div
const loadContent = (page) => {
fetch(page)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
document.getElementById('main-content').innerHTML = data;
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
document.getElementById('main-content').innerHTML = '
Error loading page
';
});
};

// Load the default page
loadContent('./pages/home.php');

// Handle navigation click
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const page = e.target.getAttribute('data-page');
if (page) {
loadContent(page);
} else {
console.error('The data-page attribute is missing on the clicked link.');
}
});
});
});

header.php

Код: Выделить всё

Jethro Blemur







#navbar{
position: fixed;
top: 1vh;
right: 1%;
width: 15%;
padding: .5% .1%;
box-shadow: 10px 10px 10px 1px black;
text-align: center;
border-radius: 20px;
background-color: white;
}
#navbar a {
font-size: 40px;
margin: 1%;
text-decoration: none;
color: turquoise;
text-shadow: 2px 2px 4px #000000;
transition: color .5s ease;
}
#navbar a:visited{
color: turquoise;
text-shadow: 2px 2px 4px #000000;
}
#navbar a:hover{
color:white;
background-color: aqua;
}
#navbar a:active,
#navbar a.active{
border-bottom: 3px solid white;
transition: border-bottom .5s ease;
}
#navbar a:active:hover,
#navbar a.active:hover {
border-bottom: 3px solid turquoise;
}





[url=#]Home[/url]
[url=#]Projects[/url]
[url=#]About[/url]
[url=#]Contact[/url]

about.php

Код: Выделить всё

About me



About Me

Some text for now

По сути, используя мою панель навигации (содержимое находится в коде header.php), приложение работает так, как должно. Он просто отображает новую часть приложения, не заставляя меня переходить на новую страницу. Однако, когда я нажимаю на одну из быстрых ссылок, это заставляет меня перейти на новую страницу, другими словами, заставляет меня выйти из приложения, а это не то, чего я хочу. Что мне сделать, чтобы каждый раз, когда я нажимаю на любую ссылку на веб-сайте, я оставался в приложении? Не стесняйтесь задавать мне любые вопросы, если я недостаточно ясно выразился!
Chatgpt не очень помог, он в основном посоветовал мне просто объединить все мои страницы в одну, что противоречит цели приложения. . Это сделало бы мой код немного сложнее читать. Лучше иметь файл для каждой страницы.

Подробнее здесь: https://stackoverflow.com/questions/786 ... hin-my-spa