Skip to content

Instantly share code, notes, and snippets.

@kuc-arc-f
Last active December 17, 2022 03:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kuc-arc-f/d2e834c29c9e920ddc4ee8ebeca97956 to your computer and use it in GitHub Desktop.
Save kuc-arc-f/d2e834c29c9e920ddc4ee8ebeca97956 to your computer and use it in GitHub Desktop.
SvelteKit 1.0, route sample
<!-- routes/posts/+page.svelte -->
<svelte:head>
<title>Posts</title>
<meta name="description" content="About this app" />
</svelte:head>
<script>
/** @type {import('./$types').PageData} */
export let data;
console.log(data);
console.log(data.items);
</script>
<div>
<h1>{data.title}</h1>
<hr />
<div>{@html data.content}</div>
<hr />
{#each data.items as item}
<div>
<h3>{item.name}</h3>
<p>ID : {item.id}</p>
<a href={`/posts/${item.id}`} class="btn">[ show ]
</a>
<hr />
</div>
{/each}
</div>
/* routes/posts/+page.ts*/
import { dev } from '$app/environment';
//export const csr = dev;
//export const prerender = true;
import { error } from '@sveltejs/kit';
//
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
return {
title: 'Hello world!',
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...',
items: [
{id: 1, name: 'n1'},
{id: 2, name: 'n2'},
]
};
// if (params.slug === 'hello-world') {
// }
// throw error(404, 'Not found');
}
<!-- routes/posts/[id]/+page.svelte -->
<svelte:head>
<title>Posts</title>
<meta name="description" content="About this app" />
</svelte:head>
<script>
/** @type {import('./$types').PageData} */
export let data;
console.log(data);
</script>
<div>
<a href={`/posts`} class="btn">[ Back ]
</a>
<h1>Show : {data.title}</h1>
<hr />
<div>{@html data.content}</div>
<hr />
</div>
/* routes/posts/[id]/+page.ts*/
import { error } from '@sveltejs/kit';
//
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
console.log("id=", params.id);
return {
title: 'Hello world: id=' + params.id,
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...',
};
// if (params.slug === 'hello-world') {
// }
// throw error(404, 'Not found');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment