页转换不适用于swup。
页转换不适用于swup。
提问于 2020-03-17 10:00:32
到目前为止我有两页。我正在做的是，我正在尝试页面转换，我正在使用下面的插件荡秋千。现在我的问题是，当我单击菜单时，页面转换不起作用。
我在href中添加了像/index和/about这样的菜单，我的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
Stack Overflow用户
发布于 2020-06-07 22:08:21
你的链接是错误的，基本上导致了一个不存在的页面。
将菜单链接更改为：
<li><a href="/example/index">Index</a></li>
<li><a href="/example/about">About</a></li>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60720007
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号