How do get query string parameter in sveltekit?

在 SvelteKit 中获取查询字符串参数是一个相对直接的过程，主要涉及到在页面的 load 函数中使用 page 对象。page 对象包含了请求的相关信息，包括 URL 和查询字符串参数。以下是获取查询字符串参数的步骤和示例：

步骤 1: 创建一个 SvelteKit 项目

如果你还没有一个 SvelteKit 项目，你可以快速开始一个新项目：

bash
npm init svelte@next

步骤 2: 定义页面组件

在 src/routes 目录下创建一个新的 Svelte 文件，例如 src/routes/example.svelte。

步骤 3: 使用 load 函数获取查询字符串参数

在你的页面组件中，你可以定义一个 load 函数来提取查询字符串参数。这个函数接收一个包含 page 属性的参数，page 对象中的 url 属性包含了当前页面的 URL 信息。

svelte
<script context="module">
  export async function load({ page }) {
    const urlParams = page.url.searchParams;

    // 获取特定的查询参数
    const param = urlParams.get('param'); // 假设 URL 是 ?param=value

    return {
      props: {
        param // 将参数传递到组件的 props 中
      }
    };
  }
</script>

<script>
  export let param;
</script>

<main>
  <h1>查询参数的值是：{param}</h1>
</main>

示例说明

在上面的示例中，我们定义了一个 load 函数，在这个函数中，我们使用了 page.url.searchParams 来获取 URL 的查询参数。searchParams 是一个 URLSearchParams 对象，提供了许多实用的方法来处理查询字符串。

我们通过调用 get 方法并传递参数的名称 (param) 来获取特定的查询参数值。然后，我们将这个值作为属性传递给页面组件。

测试

你可以通过在浏览器中访问以下 URL 来测试此功能：

shell
http://localhost:3000/example?param=value

这应该会在页面上显示“查询参数的值是：value”。

通过这种方法，你可以灵活地获取和使用 URL 查询字符串参数来根据用户的需求调整页面内容或行为。