访问 svelte 中的 URL 查询字符串

Question

我应该如何从 svelte 访问查询字符串参数？当“?beta”附加到 URL 时，我希望我的脚本有不同的行为。

我的直觉方法是URLSearchParams在细长#if块中使用标准。

Answer 1

以下是在 SvelteKit 中的操作方法：

<script>
    import { page } from '$app/stores'
    const email = $page.url.searchParams.get('email')
</script>

Answer 2

对于专门使用SvelteKit（一个 Svelte 框架）的任何人，页面存储允许您导入一个page对象，从而允许您访问参数page.query：

<script>
  import { page } from '$app/stores';
  let isBeta = page.query.beta;
</script>


{#if isBeta}
  <p>This is beta!</p>
{:else}
  <p>This is not beta.</p>
{/if}

Answer 3

是的，您应该能够使用 URLSearchParams。通常，您可以在纯 JS 中执行的任何操作都可以在 Svelte 脚本标签中执行。

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const isBeta = urlParams.has('beta');
</script>

{#if isBeta}
    <p>This is beta!</p>
{:else}
    <p>This is not beta.</p>
{/if}

Answer 4

截至 2022 年 6 月：

<script>
  import { page } from '$app/stores';
  const beta = $page.url.searchParams.get('beta');
</script>