Cách tạo một single-page web application với JavaScript

Có ai đã từng thắc mắc cách để tạo ra 1 trang web single-page giống vs cái framework như Vue, React,.. không ?

Dưới đây là một ví dụ cụ thể về cách tạo một single-page web application với JavaScript:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Single-page Web Application</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main id="content">
    <!-- Content will be dynamically loaded here -->
  </main>
  <footer>
    <p>Copyright &copy; 2022</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

JavaScript (sử dụng jQuery):

$(document).ready(function() {
  $('a').click(function(e) {
    e.preventDefault();
    var page = $(this).attr('href');
    $('#content').load(page + '.html');
  });
});

Trong ví dụ trên, khi người dùng click vào các liên kết trong menu, nội dung tương ứng sẽ được tải vào phần #content của trang HTML.