navigation - Sveltekit 根路由不会导致页面加载

Question

我正在尝试使用 sveltekit 创建一个导航栏。到目前为止，我所有的链接(哈希路由)都可以在单击时设置样式。但是，在多次单击“主页”路由后，它停止导致页面加载，这导致我的 $page 订阅无法更新，因此无法正确设置链接样式。

记录当前哈希路由的我的订阅:$: console.log($page.url.hash);

我对链接样式的测试:class:active={$page.url.hash === x.path.slice(1)

即使在主页链接停止设置样式后，所有其他链接在单击时仍将设置样式。我确实在第一页加载时在控制台中得到了一个空字符串，并且在单击离开主页并返回后再次出现。第二次单击主页链接不会在控制台中产生任何内容。

每次单击任何链接时，地址栏中的路线都会发生变化。

<script lang="ts">
    import { page } from '$app/stores';

    const navItems = [
        {
            label: 'home',
            path: '/'
        },
        {
            label: 'how it works',
            path: '/#how-it-works'
        },
        {
            label: 'pricing',
            path: '/#pricing'
        },
        {
            label: 'partners',
            path: '/#partners'
        },
        {
            label: 'contact',
            path: '/#contact-us'
        }
    ];

    $: console.log($page.url);
</script>

<nav>
    {#each navItems as x}
        <a
            href={x.path}
            class="capitalize"
            class:active={$page.url.hash === x.path.slice(1)}
        >
            {x.label}
        </a>
    {/each}
</nav>

<style>
    .active {
        font-weight: bold;
        position: relative;
    }

    .active::after {
        content: '';
        width: 100%;
        height: 3px;
        position: absolute;
        left: 0;
        bottom: -8px;
        background-color: #17a398;
        border-radius: 999px;
    }
</style>

Answer 1

老实说，我认为这里可能存在错误，您绝对应该报告它。

但是，有一个解决方法，您可以使用 goto 函数来导航。这似乎确实有效。

添加以下导入:

import { goto } from '$app/navigation';

然后在您的导航中将代码更新为:

<nav>
    {#each navItems as x}
        <a
            on:click|preventDefault={() => goto(x.path)}
            href={x.path}
            class="capitalize"
            class:active={$page.url.hash === x.path.slice(1)}
        >
            {x.label}
        </a>
    {/each}
</nav>

在这里，我们阻止了点击链接的默认操作，而是运行 goto 函数(这在编程上相当于点击链接)。

在我所做的简短测试中，样式已正确更新并且日志按预期显示。