[Svelte] svelte-spa-router

이 글은 svelte에서 svelte-spa-router를 통해 라우팅 설정 방법 및 사용 예시를 설명하고 있습니다.

 

설치

# yarn
yarn add svelte-spa-router

# npm
npm install svelte-spa-router

 

Router 설정

svelte-spa-router App.svelte에 적용한 예시입니다.

 

<script>
    import routes from "./routes";
    import Router from "svelte-spa-router";
</script>

<main>
    <!-- routes 객체를 라우팅 -->
    <Router {routes} />
</main>

routes

import Main from "./components/Main.svelte";
import About from "./components/About.svelte";
import ToDo from "./components/ToDo.svelte";

export default {
    "/": Main,
    "/about": About,
    "/todo/:id": ToDo,
};

 

use:link 

a 태그에 svelte-spa-router를 사용하는 방법입니다.

<script>
	import { link } from "svelte-spa-router";
</script>

<div>
	<a href="/" use:link>메인</a>
</div>

 

params

routes에 설정한 parameter를 받는 방법입니다.

<script>
    //Todo.svelte
    import { params } from "svelte-spa-router";
    const id = params.id
</script>

<div>
	<p>parameter id: {id}</p>
</div>

 

querystring

querystring을 사용하는 방법입니다. (주의사항 querystring을 사용 할 때 꼭 $붙여서 사용해야 합니다.)

<script>
    import { querystring } from "svelte-spa-router";
    
    let searchParams = new URLSearchParams($querystring);
</script>

<div>
	<p>{searchParams.get("id")}</p>
</div>

 

참조 

[NPM svelte-spa-router] https://www.npmjs.com/package/svelte-spa-router

svelte-spa-router

[Github svelte-spa-router] https://github.com/ItalyPaleAle/svelte-spa-router

GitHub - ItalyPaleAle/svelte-spa-router: Router for SPAs using Svelte 3