如何在SvelteKit中动态修改页面标题？

嘿，这个问题其实挺常见的，你之前的思路没问题，但因为SvelteKit里组件的作用域是独立的，所以+page.svelte里的title变量没法直接覆盖+layout.svelte里的同名变量，这就是标题没变化的原因。我来给你讲两种SvelteKit的惯用实现方式：

方法一：通过页面load函数配合布局动态绑定 #

这种方式适合统一管理页面标题，让布局来负责渲染标题，页面只需要提供标题内容：

1. 在需要自定义标题的页面（比如src/faq/+page.js）里导出load函数，返回标题数据：

export function load() {
  return {
    title: 'FAQ'
  };
}

2. 修改src/+layout.svelte，引入page store并动态绑定标题：

<script>
  import { page } from '$app/stores';
  // 设置网站默认标题
  const defaultTitle = "My Site Homepage";
</script>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 如果页面没有返回title，就用默认值 -->
  <title>{$page.data.title || defaultTitle}</title>
</head>

这样当你访问主页时，因为主页的load没有返回title，就会显示默认标题；访问FAQ页面时，就会显示FAQ。如果需要给标题加上统一后缀（比如FAQ | My Site），直接在布局的<title>里拼接即可。

方法二：直接使用setTitle函数 #

如果你只想给单个页面单独设置标题，不想改动布局，可以用SvelteKit提供的setTitle工具函数：

在src/faq/+page.svelte里添加代码：

<script>
  import { setTitle } from '$app/navigation';

  // 页面加载时设置标题
  setTitle('FAQ');
</script>

这种方法更直接，调用后会立刻修改浏览器标签的标题，不需要依赖布局的渲染逻辑，适合单个页面独立定制标题的场景。

两种方法都能解决你的问题，你可以根据自己的需求选择：如果需要统一管理所有页面的标题样式，方法一更合适；如果只是单个页面独立设置，方法二更简便。

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