问题描述
我正在测试 Swup.js
据我所知，它不适用于相对链接。像这样;
<a href="./page.html">Go page</a>
为此，您需要输入带有完整路径的 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>我的页面.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',}
var swup = new Swup(options);
</script>
</body>
</html>解决方法
尝试插入而不是 (LINK_SELECTOR: 'a')
linkSelector: 'a[href^="' + window.location.origin +'"]:not([data-no-swup]),a[href^="/"]:not([data-no-swup])',