Svelte에서 라우팅을 하는 방법에 대해서 간단한 수준에서 포스팅 해보려고 합니다.
일단 간단하게 탐색을 해본 결과, 많은 분들이 사용하시는 svelte-spa-router 존재에 대해서 알게 되었고. (이것이 거의 반을 한것이다)
링크는 아래와 같습니다.
https://github.com/ItalyPaleAle/svelte-spa-router
GitHub - ItalyPaleAle/svelte-spa-router: Router for SPAs using Svelte 3
Router for SPAs using Svelte 3. Contribute to ItalyPaleAle/svelte-spa-router development by creating an account on GitHub.
github.com
사실 여기에 대략적인 내용이 다 있지만, 기초적인 부분만 추려서 한글화 하는 작업을 하였습니다.
먼저 route 할 정책들을 변수로 선언합니다.
import Exam from "./exam/Exam.svelte";
import ExamComplete from "./exam/ExamComplete.svelte";
import Home from "./home/Home.svelte";
import Home from "./NotFound.svelte";
export const routes = {
'/': Home,
'/exam/:type': Exam,
'/complete/*': ExamComplete,
'*' : NotFound
};/ 는 시작 페이지를 나타낸다.
/exam/:type에서는 URL의 PATH를 페이지에서 파라미터로 받을 수 있다.
/complete/*은 /complete/ 다음에 어떤것이 와도 여기로 다 받아 들이겠다라는 의미입니다.
*은 선언되지 않은 주소로 들어왔을때 특정 페이지를 보여주기 위해 사용하는 용도입니다.
이렇게 정의한 부분을 App.svelte에
<body>
<Router {routes} />
</body>잘 넣어두시면 라우팅 처리는 종료입니다.
여기서 추가로 이제 아까 /exam/:type 의 경우처럼 URL PATH의 파라미터를 받고 싶을때 처리하는 방법입니다.
해당 경로를 선언한 해당 컴포넌트 스크립트 부분에
<script lang="ts">
export let params;
</script>해 놓으면 자동으로 params에 URL PATH 파라미터가 들어오게 됩니다.
그래서 필요한 곳에서
${params.type}잘 꺼내 쓰시면 됩니다.
그리고 추가로 ?title=과 같은 쿼리파람에 대해서는 아래와 같이 값을 가져올수 있습니다.
ex)#/books?show=authors,titles&order=1
<script>
import {location, querystring} from 'svelte-spa-router'
</script>
<p>The current page is: {$location}</p>
<p>The querystring is: {$querystring}</p>
The current page is: /books
The querystring is: show=authors,titles&order=1
이상으로 간단하게 Svelte라우팅을 svelte-spa-router을 통해서 경험해보았습니다.
추가적인 기능들이 더 있는것으로 보여서 조금더 사용해보고 얻는 정보가 있으면 좀 더 정리하도록 하겠습니다.