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

Question

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

我有一个普通的 sveltekit 应用程序，但它不是在导航到新页面时添加新代码，而是将新代码添加到旧代码之上，当我刷新页面时，它会删除旧代码（从上一页）

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

Answer 1

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

这是我的加载指示器代码，这是我有关该问题的文档。我不确定这是否是 SvelteKit 中的内部错误，因此我没有提交任何错误报告，因为我没有干净的可重复示例。如果您单击任何区块链，您还可以在此页面上的操作上看到固定的页面加载指示器。

<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>