英文:
Sveltekit page change adds HTML at bottom of page
问题
我有一个 Sveltekit 网络应用程序，你可以在这里找到。
你也可以在这里找到完整的代码。
我的问题是：当我改变页面时，新页面会附加到当前页面的末尾。当我刷新时，旧页面会消失。
这个问题与这个非常相似，但我没有使用任何加载指示器，并且提出的解决方法在我的情况下没有起作用。
是否有人知道我做错了什么？
包版本：
"@sveltejs/kit": "^1.22.1",
"svelte": "^3.58.0",
"@auth/sveltekit": "^0.3.3",
/+layout.svelte
<script lang="ts">
... imports
</script>
<div class="flex flex-col h-screen">
<Drawer>
<AvatarDropdown slot="user" />
<div class="grow h-full" slot="content">
<slot />
</div>
</Drawer>
</div>
/dashboard/+layout.svelte
<script>
const user = $page.data.session?.user;
</script>
{#if user}
<slot />
{:else}
请登录
{/if}
/dashboard/+page.svelte
<script>
import { onDestroy } from "svelte";
</script>
<div
class=""
out:fade={{ duration: 0 }}
>
内容
</div>
英文:
I have a Sveltekit Web Application that you can find here
You can also find the full code here
My problem is the following: When I change the page, the new page gets appended to the end of the current page. When I refresh, the old page goes away.
The problem is very similar to this one, but I do not use any loading indicator, and the proposed fixes did not work in my case.
Would anyone know what I am doing wrong?
Package versions:
"@sveltejs/kit": "^1.22.1",
"svelte": "^3.58.0",
"@auth/sveltekit": "^0.3.3",
/+layout.svelte
<script lang="ts">
... imports
</script>
<div class="flex flex-col h-screen">
<Drawer>
<AvatarDropdown slot="user" />
<div class="grow h-full" slot="content">
<slot />
</div>
</Drawer>
</div>
/dashboard/+layout.svelte
<script>
const user = $page.data.session?.user;
</script>
{#if user}
<slot />
{:else}
Please log in
{/if}
/dashboard/+page.svelte
<script>
import { onDestroy } from "svelte";
</script>
<div
class=""
out:fade={{ duration: 0 }}
>
Content
</div>
答案1
得分: 1
如这个旧问题所描述，转换可能会破坏您的用户界面。
将|local添加到您的转换中将解决这个问题，就像这样：
<div out:fly|local={{ y: -200, duration: 500 }}>
...
</div>
另一个"修复"方法是根据这里的描述，在您的链接中设置data-sveltekit-reload，但显然当用户点击链接时您可能不希望重新加载页面。
英文:
As described in this old issue, transitions can mess up your UI.
Adding |local to your transition will solve the problem, like this:
<div out:fly|local={{ y: -200, duration: 500 }}>
...
</div>
Another "fix" can be to set data-sveltekit-reload in your link as described here, but obviously you may not want to reload the page when a user clicks on the link.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论