在 SvelteKit 中如何获取查询字符串参数？

Question

我正在尝试在登录后重定向到/login?ref=/some/path参数指定的路径：

    const ref = $page.url.searchParams.get('ref') || '/dashboard';

然而我遇到了这个错误：

TypeError: Cannot read properties of undefined (reading 'searchParams')

- chovy

---

我测试了你的代码，运行得非常完美。你使用的SveteKit版本是哪个？ - tbdrz

3.x 是我所拥有的。 - chovy

那是Svelte版本，你的SvelteKit版本是什么？请更新到最新版本（1.0.0-next.294）。 - tbdrz

"@sveltejs/kit": "1.0.0-next.294", => "@sveltejs/kit": "1.0.0-next.294", - tbdrz

参考：sveltekit示例：https://learn.svelte.dev/tutorial/page-store - undefined

Answer 1

上述解决方案不可行。以下是新的方法:

export async function load({ params, url }) {
    let lang = url.searchParams.get('lang');
    let q = url.searchParams.get('q');
    return { lang, q };
}

那么，请按照以下方式操作：

import { page } from '$app/stores';
$page.data.q

感谢Richard，这比在每个页面中确认export var lang要好得多。

- Bitfinicon

---

为什么要解构参数？你没有使用它。此外，$page.data 用于一个页面 需要访问子页面或布局的数据：https://kit.svelte.dev/docs/load#using-url-data https://kit.svelte.dev/docs/load#$page-data - Big_Boulard

实际上，我们正在使用它。这就是为什么包含在内的原因。很好，它可以从服务器端访问。 - Bitfinicon

Answer 2

您可以从传递给页面的load函数的对象的url属性中获取查询字符串参数：

<script context="module">
  export function load({ url }) {
    const ref = url.searchParams.get('ref') || '/dashboard';
    return {
      props: {
        ref
      }
    };
  }
</script>
<script>
  export let ref;

  // do stuff
</script>

有关load函数、其输入格式和其反应性的更多信息，请参见此处（SvelteKit文档）。

- Thomas Hennes

---

有没有办法从$page中获取它？ - chovy

是的，你可以以类似的方式查看我快速组合的这个Stackblitz示例中Header组件的代码。顺便说一句，这也是你尝试在自己的代码中实现的方式，所以你可能需要检查一下你的SvelteKit版本是否是最新的。 - Thomas Hennes

是的，这正是我想的。我有Svelte 3.x。 - chovy

这里重要的是 SvelteKit 的版本。Kit 是处理路由等内容的地方。 - Thomas Hennes

"@sveltejs/kit": "next", - chovy

Answer 3

您可以使用

import { page } from '$app/stores'

$page.url.searchParams.get('ref')

- Alexandros Papadopoulos

---

这对我有用，谢谢！ - undefined