Svelte+Routify：Carbon分页组件无法与URL同步，始终重置为第1页

问题背景 #

使用Svelte 4构建应用，采用Routify实现路由，carbon-components-svelte作为UI组件库。需求是分页组件从URL查询参数$params.page读取当前页码，用户切换页面时同步更新URL。

问题现象 #

• 直接访问带?page=2或?page=3的URL，分页组件始终显示第1页
• 点击分页按钮可正常切换页面，URL也会同步更新，但刷新页面或直接访问带页码的URL时，分页又回到第1页
• 尝试使用bind:page替代{page}，问题依旧

问题分析 #

1. $params是Routify的响应式store，但初始化时let page = parseInt($params.page) || 1仅执行一次，若组件初始化时路由参数尚未完成解析，$params.page会是undefined，导致page被设为1，后续$params更新时不会同步到page变量
2. Carbon的Pagination组件依赖响应式的page值来更新UI，非响应式的page无法触发组件重新渲染

修正方案 #

将page改为响应式变量，订阅$params的变化来同步页码，确保路由参数更新时UI和数据都能同步：

修正后的代码 #

<script>
    import { Pagination } from "carbon-components-svelte";
    import { writable, derived, onDestroy } from "svelte/store";
    import { goto as $goto, params } from "@roxi/routify";

    export let rows;

    // 从params store派生响应式的page变量
    const page = derived(params, ($params) => {
        const currentPage = parseInt($params.page);
        return isNaN(currentPage) ? 1 : currentPage;
    });

    const opts = { limit: 20, offset: 0 };
    const hasNext = writable(opts.limit);

    // 订阅page变化，更新数据
    const pageUnsubscribe = page.subscribe(currentPage => {
        if (currentPage > 1) {
            rows.next(hasNext, currentPage);
        }
    });

    // 组件销毁时取消订阅，避免内存泄漏
    onDestroy(pageUnsubscribe);

    function updateQueryParamsPage(newPage) {
        const newParams = { ...$params, page: newPage };
        $goto(location.pathname, newParams);
    }
</script>

<DataTable
        {headers}
        rows={$rows.data}
        {sortable}
        {stickyHeader}
        {batchSelection}
        {nonSelectableRowIds}
        bind:selectedRowIds
        bind:sortKey
        bind:sortDirection>
        <!-- some code here -->
</DataTable>
<Pagination
    page={$page}
    pageSize={opts.limit}
    pageSizes={[opts.limit]}
    totalItems={$rows.count}
    pageSizeInputDisabled
    on:change={(e) => {
        updateQueryParamsPage(e.detail.page);
    }} />

关键修改点 #

• 使用derived从params store创建响应式的page变量，确保路由参数变化时自动同步
• 订阅page的变化，在页码更新时触发数据加载
• 组件销毁时取消订阅，避免内存泄漏
• 优化updateQueryParamsPage方法，直接传入新页码，避免依赖非响应式变量
• Pagination组件使用$page（响应式store的订阅值），确保UI实时更新

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