0

我正在测试Swup.js

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

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

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>

4

1 回答 1

0

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

linkSelector: 'a[href^="' + window.location.origin +'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])',
于 2021-03-15T10:55:14.737 回答