In this episode, we go hands-on with creating dynamic pages in our Nuxt app that can handle route parameters, like an ID for a to-do item. We start by pretending our to-dos are coming from an API (even though they're not just yet), and we want to be able to "link" to each to-do using its ID in the URL.
You'll see how to set up a new page that can handle a parameter by using square brackets in the filename (like [id].view
) and how to properly link to this page using the NuxtLink component. We mess around a bit with how the route is named and structured, showing you that you can customize this as you wish, just to get a feel for how flexible it is.
Then, we dive into how to access those route parameters. We'll use $route
in the template to grab the params (like the to-do's ID) and show what else is available in the route object, such as the path or any query string info. If you need to work with the param in script setup
, we use the useRoute
composable to get the same info and show how you could use it in your component logic or when fetching data from an API (which we'll be doing later for real!).
By the end, you should feel comfy setting up dynamic routes and accessing their parameters, both in your template and script, setting you up for fetching and displaying item-specific data soon.