SvelteKit路由切换时如何更新Navbar组件的标题变量？

你的问题核心在于：手动更新store标题后，浏览器后退时页面组件的onMount/onDestroy钩子不会触发（SvelteKit会缓存页面组件），导致store里的标题无法自动重置。下面是两种可靠的解决思路：

思路1：直接监听路由变化自动更新标题 #

利用SvelteKit内置的page store监听路由路径变化，在Navbar组件里直接计算标题，无需手动在每个页面更新store：

修改lib/Navbar.svelte：

<script>
    import { page } from '$app/stores';
    import { store } from "../store";

    // 根据当前路由自动计算标题
    $: title = $page.url.pathname === '/' 
        ? "Integma Check" 
        : $page.url.pathname.slice(1).toUpperCase(); // 路径/abc会转为ABC，可按需调整

    // 同步到自定义store（如果其他组件需要使用该标题）
    $: store.update(data => ({...data, title}));
</script>

<ul class="nav align-items-center bg-light border-bottom border-black">
    <li class="nav-item flex-grow-1">
        <span
            class="nav-link fs-2 py-1 pe-0 ps-4 text-black fw-medium text-center"
            >{title}</span
        >
    </li>
    <li class="nav-item">
        <select
            class="form-select form-select-sm bg-light border-0 text-black text-decoration-underline"
        >
            <option value="EN">EN</option>
        </select>
    </li>
</ul>

思路2：通过页面load函数传递自定义标题 #

如果需要给特定页面设置自定义标题（而非自动从路径生成），可以在页面的load函数中返回标题，再通过layout同步到store：

1. 在目标页面的+page.js（或+page.server.js）中定义标题：

// src/routes/abc/+page.js
export function load() {
    return {
        pageTitle: "ABC"
    };
}

2. 修改+layout.svelte，接收页面返回的data并更新store：

<script>
    import Navbar from "../lib/Navbar.svelte";
    import { store } from '../store';
    export let data;

    // 路由切换时自动同步标题到store
    $: store.update(prev => ({
        ...prev,
        title: data?.pageTitle || "Integma Check"
    }));
</script>

<Navbar />
<slot />

为什么之前的方法无效？ #

SvelteKit为了性能会缓存页面组件，浏览器后退时，页面不会重新触发onMount，也不会执行onDestroy（组件未被销毁），导致你手动写的重置逻辑无法触发。而上述两种方法都是基于路由变化的可靠触发点：page store订阅会在任何路由切换（包括后退）时触发，load函数也会在每次路由导航时执行（不管前进/后退）。

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