Question

我们有以下方法可以知道页面是否在sveltekit中加载：

import { navigating } from  $app/stores

它在苗条（即没有苗条）中的等价物是什么？

或

如何在前端实现此功能。

Answer 1

在Svelte中没有“对等”，因为Svelte本身只是用于组件，没有路由。

Answer 2

您可以收听beforeunload事件来了解我们何时开始导航。在此StackOverflow答案。

我们还可以通过在Svelte可读存储中侦听事件来创建自己的导航存储器。

您可以复制此代码块：

import { readable } from  svelte/store ;

export const navigating = readable(false, (set) => {
    // Make sure that window exists
    if (typeof window ===  undefined ) return;

    const navigatingStarted = () => {
        // Notify subscribers that we are now navigating
        set(true);

        // If page hasn t  unload  event hasn t fired in 500ms, it s probably cancelled
        let unloaded = false;
        const confirmUnloaded = () => (unloaded = true);
        window.addEventListener( unload , confirmUnloaded);
        window.setTimeout(() => {
            if (!unloaded) {
                set(false);
                window.removeEventListener( unload , confirmUnloaded);
            }
        }, 500);
    };

    window.addEventListener( beforeunload , navigatingStarted);
    return () => window.removeEventListener( beforeunload , navigatingStarted);
});

然后这样使用：

<script>
  import { navigating } from  ./navigate-store 
</script>

<p>Demo:</p>
<p>
    {#if $navigating}
        Navigating!
    {:else}
        Not navigating!
    {/if}
</p>

您可以在Stacklitz中看到一个工作示例（从技术上讲，此演示在SveltKit应用程序中运行，但<；a/>；超链接具有rel=”external“，因此它们实际上并没有使用Svelt基特路由器）

友情链接