如何在SvelteKit中通过Slug/参数路由展示律所专属数据

一、临时解决方案：客户端筛选已有数据 #

如果当前详情页是通过父页面传递了所有律所数据，你可以通过匹配slug解码后的律所名称从数组中筛选出对应数据，替换硬编码的索引：

修改详情页代码：

<script>
    import { page } from '$app/stores';
    export let data;

    // 获取路由参数并解码
    const encodedLawfirmName = $page.params.lawfirmId;
    const lawfirmName = decodeURIComponent(encodedLawfirmName);
    // 从数据数组中匹配对应律所
    const currentLawFirm = data.lawfirm.find(firm => firm.lawfirmname === lawfirmName);
</script>

<div class="lawFirmBanner">
    <h1>{lawfirmName}</h1>
</div>

{#if currentLawFirm}
    <div class="lawFirmInfo">
        <p>{currentLawFirm.lawfirmname}</p>
        <!-- 展示专属表格数据（示例） -->
        <table class="firm-table">
            <thead>
                <tr>
                    <th>业务类型</th>
                    <th>联系方式</th>
                </tr>
            </thead>
            <tbody>
                <!-- 假设currentLawFirm包含tableData字段，替换为你的实际字段名 -->
                {#each currentLawFirm.tableData as item}
                    <tr>
                        <td>{item.serviceType}</td>
                        <td>{item.contact}</td>
                    </tr>
                {/each}
            </tbody>
        </table>
    </div>
{:else}
    <p>未找到该律所信息</p>
{/if}

二、推荐方案：服务端按需获取数据 #

客户端筛选会传递所有律所数据，效率较低。更优的方式是在SvelteKit的服务端load函数中，根据路由参数直接从Supabase查询对应律所的数据：

1. 创建详情页的服务端load文件 #

在路由目录src/routes/lawfirms/[lawfirmId]/下创建+page.server.js：

// 引入你的Supabase实例（路径根据实际项目调整）
import { supabase } from '$lib/supabase';

export async function load({ params }) {
    // 解码路由参数中的律所名称
    const encodedLawfirmName = params.lawfirmId;
    const lawfirmName = decodeURIComponent(encodedLawfirmName);

    // 从Supabase查询对应律所的所有数据（包括关联的表格数据）
    const { data: lawfirm, error } = await supabase
        .from('lawfirms')
        // 替换为你的实际表名，select中包含需要的字段，关联表用"关联表名(*)"
        .select('*, firm_table_data(*)')
        .eq('lawfirmname', lawfirmName)
        .single(); // 因为律所名称唯一，取单条数据

    if (error) {
        console.error('获取律所数据失败:', error);
        return { lawfirm: null };
    }

    return { lawfirm };
}

2. 修改详情页组件代码 #

此时data中仅包含当前律所的数据，无需再筛选：

<script>
    import { page } from '$app/stores';
    export let data;

    const encodedLawfirmName = $page.params.lawfirmId;
    const lawfirmName = decodeURIComponent(encodedLawfirmName);
</script>

<div class="lawFirmBanner">
    <h1>{lawfirmName}</h1>
</div>

{#if data.lawfirm}
    <div class="lawFirmInfo">
        <p>{data.lawfirm.lawfirmname}</p>
        <!-- 展示专属表格 -->
        <table>
            <thead>
                <tr>
                    <th>字段</th>
                    <th>内容</th>
                </tr>
            </thead>
            <tbody>
                {#each data.lawfirm.firm_table_data as row}
                    <tr>
                        <td>{row.field}</td>
                        <td>{row.value}</td>
                    </tr>
                {/each}
            </tbody>
        </table>
    </div>
{:else}
    <p>未找到该律所信息</p>
{/if}

三、额外优化建议 #

• 用ID替代名称作为路由参数：律所名称可能修改或重复，改用数据库中的唯一ID（如id字段）作为路由参数更可靠。卡片页链接改为/lawfirms/{LawF.id}，服务端查询时用eq('id', params.lawfirmId)。
• 添加Slug字段：如果坚持用名称类的参数，建议在Supabase表中新增slug字段，存储URL友好的字符串（如小写、替换空格为短横线），避免特殊字符问题。

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