라우팅

1. 라우팅

폴더명 - 페이지 이름
about
+layout.svelte
+page.svelte

ex => http://localhost:5173/about

2. 다이나믹 라우트 (Dynamic Routes)

페이지 내 정보 가져와서 적용함

price
[urlId]
+page.svelte

<script>
	import { page } from '$app/stores';

	const productId = $page.params.productId;
</script>

<h1>상품{productId} 상세페이지</h1>

3. 중첩 라우트 (Nested Routes)

해당 폴더 내 라우팅

first, second
+page.svelte

4. Catch All Routes, 옵션 파라미터
   다이나믹 라우팅을 구현 하는 다른 방법
   layout이 같고 url이 다른 상황에서 구현
   스프레드 문법과 유사하게 사용

[...slug], [[lang]]

[...slug] 설정

<script type="ts">
	import { page } from '$app/stores';

	const slugId = $page.params.slug.split('/');

	console.log(slugId);
</script>

<h1>Docs 페이지</h1>

{#if slugId.length === 1}
	<h1>주제 {slugId[0]}</h1>
{:else if slugId.length === 2}
	<h2>소주제 {slugId[1]}</h2>
{/if}

[[lang]] 설정

<script type="ts">
	import { page } from '$app/stores';

	const slugId = $page.params.slug.split('/');

	console.log($page);
	const { lang = 'ko' } = $page.params;
</script>

<h1>Doc 페이지</h1>

{#if lang === 'ko'}
	<h2>안녕</h2>
{:else if lang === 'en'}
	<h2>hi</h2>
{:else if lang === 'ja'}
	<h2>일본어</h2>
{/if}

ex => http://localhost:5173/docs/en
http://localhost:5173/docs/ja

4. Route Navigation, 라우트 레이아웃(Route Layout)
   스벨트에서는 a 태그로 구현함
   +layout.svelte 내에서 페이지 링크 구현
   slot 내 내용 들어감

<a href="/">home</a>
<a href="/about">about</a>
<a href="/products">products</a>
<a href="/blog/first">/blog/first</a>
<a href="/docs">docs</a>
<a href="/doc">doc</a>
<a href="/price">price</a>
<a href="/price-server">price-server</a>

<slot><!-- optional fallback --></slot>

5. 라우트 매칭 (Route Matching)

src-parmas-interger.js

네이게이션에 숫자만 사용

export function match(param) {
	return /^\d+$/.test(param);
}

[폴더명=integer]

ex => http://localhost:5173/products/1

http://localhost:5173/products/dfjkh] - 텍스트 사용시 에러

6. Layout Group
   화면 구조가 새로운 페이지에 대한 설정
   (app), (auth)

ex => http://localhost:5173/login
ex => http://localhost:5173/

7. breaking out of layouts

+page@(auth).svelte
-> 상위 레이아웃을 따라서 정의

+page@.svelte