svelte에서 URL 쿼리 문자열 액세스

svelte에서 URL 쿼리 문자열 액세스

svelte에서 쿼리 문자열 매개 변수를 어떻게 액세스해야 합니까? URL에 "?beta"가 추가되었을 때 스크립트가 다르게 동작했으면 합니다.

나의 직관적인 접근법은 표준을 svelte block에 사용하는 것이다.

---

네, URL 검색 파라미터를 사용할 수 있을 겁니다. 일반적으로, 평이한 JS에서 할 수 있는 모든 것은 스벨테 스크립트 태그에서 할 수 있다.

<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에서는 를 사용해야 합니다. 를 노출합니다.

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

이 상점은 최근에 변경되었기 때문에 참조하는 다른 답변이 구식일 수 있습니다. 특히 로 교체된 이후에는 더 이상 사용할 수 없습니다.

---

Svelte 프레임워크를 사용하는 모든 사용자의 경우, 는 다음과 같이 매개 변수에 액세스할 수 있도록 개체를 가져올 수 있습니다:

<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}

---

다음은 SvelteKit에서 수행하는 방법입니다:

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

---

좀 오래된, 표시된 것처럼 서버 사이드 렌더링과 다소 더 관련이 있다: 나는 이것이 더 나을 수 있다고 생각한다:

<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}

---

2022년 6월 기준:

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

---

2023년에 스벨테킷을 이용해서,

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

{#if typeof beta === 'string'}
Beta is on!
{:else}
No beta :(
{/if}

당신이 사용하거나 혹은 진실로 여겨지는 어떤 가치를 사용할 때 당신의 삶은 조금 더 편해질 것이다. 위의 스니펫은 그것이 (빈) 문자열인지 확인하기 위해 필요했다.