Sapper中如何在preload函数外部访问URL参数？

我完全理解你在Sapper里遇到的这个问题——文档里只提到通过preload()的params对象获取URL参数，但想在这个函数之外使用这些参数确实没直接给出方案，我来分享几个实用的解决办法：

1. 通过preload传递参数到组件Props #

这是最直接且符合Sapper设计逻辑的方式。preload()返回的所有数据都会自动作为props注入到组件中，你可以直接在组件的常规脚本里使用这些参数：

<script context="module">
  export async function preload(page) {
    // 从page对象里提取URL参数
    const { slug, id } = page.params;
    // 返回参数，它们会成为组件的props
    return { articleSlug: slug, itemId: id };
  }
</script>

<script>
  // 直接接收preload传递过来的props
  export let articleSlug;
  export let itemId;

  // 现在你可以在组件的任何地方使用这些参数了，比如data函数、事件处理里
  function logParams() {
    console.log(`当前文章Slug: ${articleSlug}, 项目ID: ${itemId}`);
  }
</script>

<button on:click={logParams}>打印URL参数</button>

这种方法的优势是参数在组件初始化时就已就绪，不需要额外的异步操作，完全适配Sapper的预加载流程。

2. 订阅Sapper内置的page Store #

Sapper提供了一个内置的page store，它实时同步当前页面的所有信息，包括URL参数。你可以在任何页面组件或布局组件里订阅这个store来获取参数：

<script>
  import { page } from '@sapper/app';
  import { onDestroy } from 'svelte';

  let currentParams = {};

  // 订阅page store，实时获取参数变化
  const unsubscribe = page.subscribe(pageInfo => {
    currentParams = pageInfo.params;
    // 比如currentParams.id就是你要的URL参数
  });

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

<p>当前URL参数：{JSON.stringify(currentParams)}</p>

这个方法适合不需要预加载数据，但需要动态响应URL参数变化的场景，而且不需要依赖preload()函数。

3. 存入全局Store（跨组件共享参数） #

如果需要在非页面组件（比如通用组件、工具函数）里访问URL参数，可以把参数存入自定义的全局store：

首先创建一个store文件：

// src/stores/routeParams.js
import { writable } from 'svelte/store';

export const routeParams = writable({});

然后在页面的preload()里更新这个store：

<script context="module">
  import { routeParams } from '../stores/routeParams.js';

  export async function preload(page) {
    // 将URL参数存入全局store
    routeParams.set(page.params);
    // 你的其他预加载逻辑...
  }
</script>

之后在任何组件里都可以订阅这个store来获取参数：

<script>
  import { routeParams } from '../stores/routeParams.js';

  let params = {};
  routeParams.subscribe(p => params = p);
</script>

<div>当前路由参数：{params.id}</div>

为什么你之前尝试的data()方法不行？ #

你提到在data()里设置属性但preload()无法读写，这是因为preload()是模块级别的异步函数，在组件实例创建之前就会运行；而data()是组件实例化后才执行的方法，两者处于不同的上下文环境，所以preload()无法直接访问data()里的内容，反之亦然。上面的几种方法都是基于Sapper的运行机制设计的，能完美解决这个问题。

内容的提问来源于stack exchange，提问作者Yousuf Iqbal Hashim