sveltekit 在旧页面之上添加新页面

Question

我刚刚在我的 sveltekit 应用程序中遇到了一个非常意外的错误，我在网上找不到任何关于它的内容

我有一个普通的 sveltekit 应用程序，但在导航到新页面时并没有补充新代码，它只是在旧代码之上添加新代码，当我刷新页面时它会删除旧代码（来自上一个页）

编辑：经过更多探索后，我意识到它只发生在一页上，我的代码的哪一部分可以做到这一点？

Answer 1

在 SvelteKit 上有一个用于内部导航的页面加载指示器时，我遇到了同样的问题。任何页面 DOM 修改，以在页面导航期间显示加载指示器，导致页面出现两次错误。解决方法是在导航期间不修改页面，仅使用 CSS 来显示、动画和隐藏加载指示器。

Here is my loading indicator code 和 Here is my documentation regarding the issue。我不确定这是否是 SvelteKit 中的内部错误，所以我没有提交任何错误报告，因为我没有一个干净的可重复示例。 You can also see the fixed page loading indicator on the action on this page if you click any of the blockchains.

<script>
    /**
     * Svelte does not give a load indication if you hit a link that leads to a page with slow load() function.
     * Svelte uses internal router, not server-side loading.
     * Thus, we need to manually give some indication in the user interface if the loading takes more than a blink of an eye.
     *
     * The component is originally made for https://tradingstrategy.ai
     *
     * Based on the original implementation https://github.com/shajidhasan/sveltekit-page-progress-demo by Shajid Hasan.
     *
     * As this component is absolutely position, you can put it at any part of your __layout.svelte.
     */
    import { onDestroy, onMount } from 'svelte';
    import { writable } from 'svelte/store';
    import { tweened } from 'svelte/motion';
    import { cubicOut } from 'svelte/easing';

    const navigationState = writable();

    const progress = tweened(0, {
        duration: 3500,
        easing: cubicOut
    });

    const unsubscribe = navigationState.subscribe((state) => {

        // You will always get state=undefined
        // event on the server-side rendering, so
        // safely ignore it
        //console.log("The loading state is", state);

        if (state === 'loading-with-progress-bar') {
            progress.set(0, { duration: 0 });
            progress.set(0.8, { duration: 5000 });
        } else if (state === 'loaded') {
            progress.set(1, { duration: 1000 });
        }
    });

    onMount(() => {
        // progress.set(0.7);
    });
    onDestroy(() => {
        unsubscribe();
    });
</script>

<!-- See the (little) documentation of special SvelteKit events here https://kit.svelte.dev/docs#events -->
<svelte:window
    on:sveltekit:navigation-start={() => {

        // If the page loads fast enough in the preloading state,
        // never display the progress bar
        $navigationState = 'preloading';

        // Delay the progress bar to become visible an eyeblink... only show if the page load takes too long
        setTimeout(function() {
            // After 250ms switch preloading to loading-with-progress-bar
            if($navigationState === 'preloading') {
                $navigationState = 'loading-with-progress-bar';
            }
        }, 500);
    }}
    on:sveltekit:navigation-end={() => {
        $navigationState = 'loaded';
    }}
/>

<!--
    Make sure the container component is always in the DOM structure.

    If we make changes to the page structure during the navigation, we get a page double render error:
    https://stackoverflow.com/questions/70051025/sveltekit-adds-new-page-on-top-of-old-one

    Not sure if this is a bug or a feature.
    Thus, make sure any progress animation is done using CSS only.
-->
<div class="page-progress-bar" class:loaded={$navigationState === 'loaded'} class:preloading={$navigationState === 'preloading'} class:loading={$navigationState === 'loading-with-progress-bar'}>
    <div class="progress-sliver" style={`--width: ${$progress * 100}%`} />
</div>

<style>
     /* Always stay fixed at the top, but stay transparent if no activity is going on */
    .page-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0.5rem;
        background: transparent;
        z-index: 100;
        opacity: 0;
        transition: opacity 0.5s;
    }

     /* After transitioning from preloading to loading state, make the progress bar visible with CSS transition on opacity */
    .page-progress-bar.loading {
        opacity: 1;
        transition: opacity 0.5s;
    }

    .progress-sliver {
        width: var(--width);
        background-color: var(--price-up-green);
        height: 100%;
    }
</style>

Answer 2

我也看到了过渡指令的这个问题。播放退出动画时会加载新页面。我使用本地转换来解决这个问题。

https://svelte.dev/tutorial/local-transitions