面试题：SvelteKit 中如何初步实现多语言支持的路由方案

创建语言相关目录结构：
- 在 src/routes 目录下，为每种支持的语言创建一个顶级目录，例如 src/routes/en、src/routes/zh 等。
配置路由：
- 在 SvelteKit 项目的 src/routes 目录中，修改 +layout.js 文件（针对应用的顶层布局）。可以通过 load 函数获取当前路由信息来确定语言。
- 示例代码（+layout.js）：
```
export const load = async ({ url }) => {
    const lang = url.pathname.split('/')[1];
    return { lang };
};
```
- 对于子路由的布局，在相应子目录的 +layout.js 中也可以采用类似方式获取语言信息，确保语言信息能在整个路由树中传递。

关联不同语言的页面：

在每种语言的目录下创建对应的页面文件，例如在 src/routes/en/home.svelte 和 src/routes/zh/home.svelte 分别创建英文和中文的首页。
在应用的入口点（如 src/routes/+layout.svelte），可以通过获取的语言信息动态加载不同语言的样式、文本等资源。例如：

<script>
    import { page } from '$app/stores';
    let lang;
    $: page.subscribe((data) => {
        lang = data.lang;
    });
</script>
{#if lang === 'en'}
    <h1>Welcome</h1>
{:else if lang === 'zh'}
    <h1>欢迎</h1>
{/if}

还可以使用国际化库（如 i18next）来管理语言翻译。在项目中安装 i18next 及相关 Svelte 集成包（如 svelte - i18next）。
配置 i18next，在 src/lib 目录下创建 i18n.js 文件，示例配置：

import i18n from 'i18next';
import { initReactI18next } from'react - i18next';
import en from '../locales/en.json';
import zh from '../locales/zh.json';

const resources = {
    en: {
        translation: en
    },
    zh: {
        translation: zh
    }
};

i18n
   .use(initReactI18next)
   .init({
        resources,
        lng: 'en',
        interpolation: {
            escapeValue: false
        }
    });

export default i18n;

在 Svelte 组件中使用翻译，例如：

<script>
    import { t } from'svelte - i18next';
</script>
<p>{t('welcome')}</p>

通过路由获取的语言信息来动态切换 i18next 的语言，例如在 +layout.js 中：

import i18n from '$lib/i18n';
export const load = async ({ url }) => {
    const lang = url.pathname.split('/')[1];
    i18n.changeLanguage(lang);
    return { lang };
};

面试题：SvelteKit 中如何初步实现多语言支持的路由方案

知识考点

面试题答案