在 svelte 中访问 URL 查询字符串

Question

我应该如何从 svelte 访问查询字符串参数？当“?beta”附加到 URL.

时，我希望我的脚本表现不同

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

Answer 1

是的，您应该可以使用 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}

编辑：上述方法在SvelteKit, which enables server-side rendering by default. In SvelteKit, you should use the page store, which exposes a native URL object.

中无效

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

这家商店最近更改为 SvelteKit v1.0.0-next.208，因此引用它的其他答案可能已过时。特别是 $page.query 不再可用，因为它已被 $page.url 取代。

Answer 2

对于专门使用 SvelteKit, a Svelte framework, the page store 的任何人，您可以导入一个 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

以下是您在 Svelte Kit 中的操作方法：

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

Answer 4

有点旧，window 与服务器端渲染有关，如前所述here：我认为这可能更好：

<script>   
    import { page } from '$app/stores'
    let urlPrams = $page.query.get('beta')
    const isBeta = false
    if (urlPrams && urlPrams.length > 0) {
         const isBeta = true
    }
    
</script>

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

Answer 5

截至 2022 年 6 月：

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

在 svelte 中访问 URL 查询字符串

Access URL query string in svelte

svelte

query-parameters