面试题：SvelteKit 路由多语言支持下的动态路由参数与语言切换的协同处理

实现思路

语言切换机制：使用一个状态管理来跟踪当前语言，例如在 SvelteKit 中可以利用 $app/stores 中的 page 存储结合 beforeNavigate 事件。
动态路由参数处理：在组件中获取动态路由参数 id，根据当前语言从相应语言的数据源中获取对应内容。数据源可以是 JSON 文件或者 API 接口。
语言切换时更新内容：当语言切换时，触发重新获取数据的逻辑，确保页面内容更新为新语言版本。

关键代码片段

设置语言切换状态 在 +layout.js 中：

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

export const load = async ({ url }) => {
    const lang = url.searchParams.get('lang') || 'en';
    return { lang };
};

beforeNavigate(({ url }) => {
    const lang = url.searchParams.get('lang');
    if (lang) {
        page.update((p) => {
            p.data.lang = lang;
            return p;
        });
    }
});

在动态路由组件中获取数据 在 +page.svelte 中：

<script lang="ts">
    import { page } from '$app/stores';
    import { onMount } from'svelte';
    import type { PageData } from './$types';

    const { params } = $page;
    const { lang } = $page.data as PageData;
    let productData;

    const fetchProductData = async () => {
        const response = await fetch(`/api/products/${params.id}?lang=${lang}`);
        productData = await response.json();
    };

    onMount(() => {
        fetchProductData();
    });

    $: $page.on('update:data', () => {
        fetchProductData();
    });
</script>

{#if productData}
    <h1>{productData.title}</h1>
    <p>{productData.description}</p>
{/if}

API 端根据语言返回数据 在 Node.js 示例中：

const express = require('express');
const app = express();
const productsEn = require('./products.en.json');
const productsFr = require('./products.fr.json');

app.get('/api/products/:id', (req, res) => {
    const { id } = req.params;
    const lang = req.query.lang || 'en';
    const product = lang === 'en'? productsEn.find(p => p.id === id) : productsFr.find(p => p.id === id);
    if (product) {
        res.json(product);
    } else {
        res.status(404).send('Product not found');
    }
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

星途面试题库

面试题：SvelteKit 路由多语言支持下的动态路由参数与语言切换的协同处理

知识考点

面试题答案

实现思路

关键代码片段