переход страницы не работает с swup js

У меня сейчас 2 страницы. Я пытаюсь выполнить переход между страницами и использую подмену плагинов ниже. Теперь моя проблема в том, что переход страниц не работает, когда я нажимаю на меню.

Я добавил меню вроде /index а также /about в href и мой URL http://localhost:8080/example/index и когда я нажимаю на меню, я получаю object not found и URL показывает http://localhost:8080/about

может ли кто-нибудь помочь мне с этой проблемой?

header.php

<header>
<div>
<ul>
<li><a href="/index">Index</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>
</header>

Index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <link href="assets/css/style.css">
</head>

<body>
  <?php include('assets/include/header.php');?>
  <div id="swup" class="transition-fade">
    <h1>This is homepage</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
  <script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
  <script src="assets/js/main.js"></script>
</body>
</html>

about.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Document</title>
  <link href="assets/css/style.css">
</head>

<body>
  <?php include('assets/include/header.php');?>

  <div id="swup" class="transition-fade">
    <h1>This is Aboutpage</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>

  <script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
  <script src="assets/js/main.js"></script>
</body>

</html>

style.css

.transition-fade {
    transition: 0.4s;
    opacity: 1;
  }

  html.is-animating .transition-fade {
    opacity: 0;
  }

main.js

import Swup from 'swup';
const swup = new Swup();
Источник

1 ответ

Ваши ссылки неверны и в основном ведут на несуществующие страницы.

Измените ссылки в меню на:

<li><a href="/example/index">Index</a></li>
<li><a href="/example/about">About</a></li>
Источник
Другие вопросы по тегам