[SOLVED] Why Swup.js does not handle relative links?

Why Swup.js does not handle relative links?

I'm testing Swup.js

As far as I see it doesn't work with relative links. Like this;

<a href="./page.html">Go page</a>

Screenshoot for link in DOM

For this you need to enter the URL with the full path. But this may be undesirable. Relativity is used quite often, especially in designs with HTML content.

It works when I do as follows.

<a href="//localhost/a/b/c/page.html">Go page</a>

This was not the case with Turbolinks. What is the reason of this? Do I need to make any adjustments? Thanks.

My index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SWUP INDEX</title>
  <link rel="stylesheet" href="">
  <script src="swup.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="1.css">
    <script src="1.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>

  <div id="swup">

    <h1>INDEX</h1>
    <a href="/page.html">Go Page</a>
  </div>

  <script type="text/javascript">
    var options = {
      LINK_SELECTOR: 'a',
      FORM_SELECTOR: 'form[data-swup-form]',
      animationSelector: '[class^="a-transition-"]',
      cache: true,
      pageClassPrefix: '',
      scroll: true,
      debugMode: true,
      preload: true,
      support: true,
      disableIE: false,
      skipPopStateHandling: function(event){
        if (event.state && event.state.source == "swup") {
          return false;
        }
        return true;
      },
    }
    var swup = new Swup(options);
  </script>


</body>
</html>

My page.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SWUP PAGE</title>
  <link rel="stylesheet" href="">
  <script src="swup.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="2.css">
    <script src="2.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>

  <div id="swup">

    <h1>PAGE</h1>
    <a href="/index.html">Go Index</a>
  </div>

  <script type="text/javascript">
    var options = {
      LINK_SELECTOR: 'a',
      FORM_SELECTOR: 'form[data-swup-form]',
      animationSelector: '[class^="a-transition-"]',
      cache: true,
      pageClassPrefix: '',
      scroll: true,
      debugMode: true,
      preload: true,
      support: true,
      disableIE: false,
      skipPopStateHandling: function(event){
        if (event.state && event.state.source == "swup") {
          return false;
        }
        return true;
      },
    }
    var swup = new Swup(options);
  </script>
  

</body>
</html>

Solution

Try to insert that instead of (LINK_SELECTOR: 'a')

linkSelector: 'a[href^="' + window.location.origin +'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])',