SvelteKit问题：调用goto后Header组件未刷新的解决方法

问题场景 #

你的+layout.svelte代码如下：

<div class="app">
    <Header />
    
    <main>
        {@render children()}
    </main>
</div>

调用goto方法跳转页面时，Header组件没有跟着刷新。Header里用到了page对象，但只在组件挂载时执行一次逻辑：

const init = async () => {
    if (page.url.pathname === '/error') {
        // 执行对应操作
    }       
}

onMount(init)

核心问题是onMount仅在组件首次渲染时触发，页面跳转导致page.url变化时，不会重新执行init函数。

可行解决方案 #

方案1：用响应式语句监听page变化 #

利用Svelte的$:响应式特性，当page对象更新时自动重新执行逻辑。可以保留init函数，同时添加响应式触发：

const init = async () => {
    if (page.url.pathname === '/error') {
        // 执行对应操作
    }       
}

// 组件挂载时先执行一次
onMount(init);

// 监听page变化，每次更新都重新调用init
$: if (page) {
    init();
}

也可以直接把逻辑写在响应式块里，省去单独的init函数：

$: if (page?.url.pathname === '/error') {
    // 直接编写需要执行的操作
}

方案2：订阅page store（适用于SvelteKit） #

如果page是SvelteKit提供的store，可以通过订阅来监听其变化：

import { page } from '$app/stores';

let unsubscribe;

onMount(() => {
    // 订阅page store，每次更新时触发回调
    unsubscribe = page.subscribe((newPage) => {
        if (newPage.url.pathname === '/error') {
            // 执行对应操作
        }
    });

    // 组件销毁时取消订阅，避免内存泄漏
    return () => unsubscribe();
});

以上两种方式都能让Header组件在页面跳转时，根据page.url的变化重新执行逻辑，实现组件的“刷新”效果。

内容的提问来源于stack exchange，提问作者morpheus