More than 5 years have passed since last update.

svelte-spa-routerを使ってみる

Posted at 2019-11-13

#svelteとsvelte-spa-routerでSPAを作る

degetをインストール

$ npm install -g degit

degetでテンプレートをダウンロード

$ degit sveltejs/template svelte-app

起動してみる

$ cd svelte-app
$ npm install
$ npm run dev

svelte-spa-routerのインストール

$ npm install svelte-spa-router

app.svelteにRouterタグを設置

svelte-app/src/app.svelte

<script>
  import Router from 'svelte-spa-router' #svelte-spa-routerをインポートする
</script>

<body>
    <Router {routes}/> #パスに対してマッチしたコンポーネントを描画
</body>

app.svelteにコンポーネントとルーティング設定を追加

svelte-app/src/app.svelte

<script>
import Router from 'svelte-spa-router'
import Home from './routes/home.svelte'
import Showpage from './routes/showpage.svelte'

const routes = {
    '/': Home,
    '/showpage/': Showpage,
}
</script>

<body>
    <Router {routes}/>
</body>

home.svelteを作成しshowpageへのリンクを設置

svelte-app/src/routes/home.svelte

<script>
  import {link} from 'svelte-spa-router' #svelte-spa-routerのlinkをインポートする
</script>

<h1>Homepage</h1>
<a href="/showpage" use:link>showpageへ</a>

showpage.svelteを作成しhomeへのリンクを設置

svelte-app/src/routes/showpage.svelte

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

<h1>showpage</h1>
<a href="/" use:link>Homeへ</a>

起動してみる

$ npm run dev

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up