Svelte 3 Router

 

https://madfishdev.tistory.com/31?category=855358

시작

• Svelte도 React Router와 같은 형태의 Router를 지원한다.
• 일단 먼저 Svelte 프로젝트를 하나 생성 한다.

typescript 형태의 기본 svelte project 추가

• 위와 같이 svelte project 추가
• Svelte typescript 추가  Svelte(Tyepscript) 시작 

Svelte(Typescript) 시작

 

코딩

• 먼저 Routing을 위해서는 Routing할 View가 있어야 한다.
• ListView.svelte, ImageView.svelte 두개의 파일을 src/ 아래 추가 한다.

ImageView.svelte

<script script="ts">
	export let title = 'Image View'
</script>
  
<main>
	<h1>Hello {title}!</h1>
	<image src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="image"/>
</main>

LisrView.svelte

<script script="ts">
	export let title = 'ListViews'
</script>
  
<main>
	<h1>Hello {title}!</h1>
	<p>this is list View</p>
</main>

 

• 이제 router code를 추가 해야 한다. /src 아래 routers.ts 파일을 추가 한다.

routers.ts

import ListView from './ListView.svelte'
import ImageView from './ImageView.svelte'

const routes = {
  '/': ListView,
  '/img': ImageView,
}

export default routes

 

• 이제 svelte-spa-router npm을 추가 한다.
• svelte의 react-dom router와 같은 역할을 하는 package이다.

npm install --save svelte-spa-router

 

• App.svelte를 수정하여, Router의 View들을 화면상에 뿌려준다.

<script lang="ts">
    import Router from 'svelte-spa-router';
    import routes from './routers';
</script>

<Router {routes} />

• 실행 시켜 보면 Default로 지정한 ListView가 화면상에 나타남을 확인 할 수 있다.
• 각 View로의 이동은 svelte-spa-router의 push 함수를 사용해야 한다.
• ListView -> ImageView로 ImageView -> ListView로 이동하는 버튼을 하나씩 넣어 서로 이동하는 code를 넣어 보자

ListView

<script script="ts">
    import {push } from 'svelte-spa-router'
	export let title = 'ListViews'
</script>
  
<main>
	<h1>Hello {title}!</h1>
    <div>
        <button text on:click={ () => push("/img")}>Move image view</button>
    </div>
	<p>this is list View</p>
</main>

 

ImageView

<script script="ts">
    import { push } from 'svelte-spa-router'
	export let title = 'Image View'
</script>
  
<main>
	<h1>Hello {title}!</h1>
    <div>
        <button text on:click={ () => push("/")}>Move List view</button>
    </div>
	<image src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="image"/>
</main>

 

이제 각 버튼을 누르면 화면이 이동되는 것을 확인 할 수 있다.