Svelte -라우터 설정하기

우선 스벨트 프로젝트를 생성했으면 라우터도 깔아줍니다.!

터미널에 아래의 명령어를 입력하여 깔기 !!

 npm install --save svelte-spa-router

app.svelte에 routing임포트해주기!!

 

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

<Header />
<main>
  <Router {routes} />
</main>

<style>
</style>

그리고 src에 routes라는 폴더를 생성합니다 ~!

src > routes > Home.svelte

<h1>홈</h1>

src > routes > Write.svelte

<h1>글쓰기</h1>

src > routes > index.ts

import Home from "./Home.svelte";
import Write from "./Write.svelte";

export default {
  "/": Home,
  "/write": Write,
};

src > Header.svelte

<script>
  // 깔끔한 해시 모드 경로 변경
  import { link } from "svelte-spa-router";
</script>

<header>
  <a use:link href="/">Home</a>
  <a use:link href="/write">Write</a>
</header>

스벨트로 라우터하기 !..

처음에는 조금 헤맸당 ㅠㅠ