92 lines
2.0 KiB
Markdown
92 lines
2.0 KiB
Markdown
# svelte-router
|
|
|
|
Simple router for vite+svelte
|
|
|
|
# Usage
|
|
|
|
|
|
App.svelte
|
|
```svelte
|
|
<script lang="ts">
|
|
import Router, { route } from './lib/Router.svelte';
|
|
import TodosPage from './pages/TodosPage.svelte';
|
|
import TodoPage from './pages/TodoPage.svelte';
|
|
|
|
route('/', TodosPage);
|
|
route('/[id]', TodoPage);
|
|
</script>
|
|
|
|
<Router>
|
|
{#snippet notfound()}
|
|
<h1>Not found</h1>
|
|
<p>Sorry, the page you are looking for does not exist.</p>
|
|
<p>Return to <a href="/">home</a>.</p>
|
|
{/snippet}
|
|
</Router>
|
|
```
|
|
|
|
TodoPage.svelte
|
|
```svelte
|
|
<script lang="ts">
|
|
import { paramNumber } from '../lib/Router.svelte';
|
|
|
|
const id = $derived(paramNumber('id'));
|
|
|
|
async function getTodos() {
|
|
return await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then((res) => res.json());
|
|
}
|
|
</script>
|
|
|
|
{#await getTodos()}
|
|
<div>loading...</div>
|
|
{:then todo}
|
|
<h1>
|
|
{todo.title}
|
|
</h1>
|
|
<label>
|
|
Completed
|
|
<input type="checkbox" checked={todo.completed} />
|
|
</label>
|
|
{/await}
|
|
```
|
|
|
|
TodosPage.svelte
|
|
```svelte
|
|
<script lang="ts">
|
|
import { queryNumber } from '../lib/Router.svelte';
|
|
|
|
const page = $derived(queryNumber('page', 1));
|
|
const limit = $derived(queryNumber('limit', 5));
|
|
|
|
async function getTodos() {
|
|
return await fetch(`https://jsonplaceholder.typicode.com/todos?_page=${page}&_limit=${limit}`).then((res) => res.json());
|
|
}
|
|
</script>
|
|
|
|
<h1>Todos</h1>
|
|
|
|
<div>
|
|
Items per page
|
|
<a href="?page={page}&limit=5">5</a>
|
|
<a href="?page={page}&limit=10">10</a>
|
|
<a href="?page={page}&limit=25">25</a>
|
|
</div>
|
|
|
|
{#await getTodos()}
|
|
<div>loading...</div>
|
|
{:then data}
|
|
<ul>
|
|
{#each data as todo}
|
|
<li>
|
|
<a href="/{todo.id}">{todo.title}</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{/await}
|
|
|
|
<div>
|
|
<a href="?page={Math.max(1, page - 1)}&limit={limit}">prev page</a>
|
|
<span>page {page}</span>
|
|
<a href="?page={page + 1}&limit={limit}">next page</a>
|
|
</div>
|
|
``` |