为什么 Swup.js 不处理相对链接？

Question

我正在测试Swup.js

据我所知，它不适用于相关链接。像这样；

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

Screenshoot for link in DOM

为此，您需要输入完整路径 URL。但这可能是不可取的。相对论经常使用，尤其是在具有 HTML 内容的设计中。

按如下操作就可以了

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

Turbolinks 并非如此。这是什么原因呢？我需要做任何调整吗？谢谢。

我的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>

我的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>

Answer 1

尝试插入而不是 (LINK_SELECTOR: 'a')

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

为什么 Swup.js 不处理相对链接？

Why Swup.js does not handle relative links?

javascript

relative-url

swup

我的index.html

我的page.html