How to access SvelteKit dynamic params from router

As I’m working to rebuild linguinecode.com in SvelteKit framework, I’m attempting to learn how to access the dynamic bracket parameter for my site called “slug”.


src/
  routes/
    post/
      [slug].svelte

So if I hit this URL http://localhost:3000/post/2 I want to be able to access the number 2 in the url. Is this easy to do so?

The answer is yes! You can access the app store.

First, if you’re looking to become an expert Svelte developer for 2022, you might want to look into Level Up Tutorials, SvelteKit course for just $49.99. This course does a great job getting past difficult learning hurdles and giving you the skills and confidence to create amazing web applications.

Get started with SvelteKit course.

Disclaimer: The two SvelteKit course links are affiliate links where I may receive a small commission for at no cost to you if you choose to purchase a plan from a link on this page. However, these are merely the course I fully recommend when it comes to becoming a Svelte engineer expert.

Let’s see this done in practice!

Access dynamic params in SvelteKit with $app/stores

The first step you want to take is to create a .svelte, .js, or .ts file with brackets ([param]) and the dynamic parameter name you desire. Starting routes with ‘[‘ and end with ‘]‘ are dynamic routes in SvelteKit.

So any route that follows a pattern such as ‘/post/abc‘, ‘/post/betty‘ will be matched by routes/post/[slug].svelte.


<script>
  import { page } from '$app/stores';
  console.log($page.params)
</script>

Below is the output of the console.log() above:


{ slug: '2' }

I like to tweet about Svelte and post helpful code snippets. Follow me there if you would like some too!