Sometimes, routes have parameters that refer to the ID or the slug of a resource. For instance, maybe you want to fetch a movie with a particular ID. Your route would probably look something like slash movies slash whatever the ID of the movie is. The file-based routing system provided by Nuxt can handle these types of parameters by including square brackets inside of our file names.
Let's demonstrate that by creating a page to show a particular movie based on its ID. Inside of the movies directory, I'll create a file called opening square bracket D, closing square bracket dot U. I could have just as easily used the NUXY command to generate this page for me. However, I thought it was also nice to point out that you can directly create these files.
And it's the exact same thing as using the NUX command. You just don't get the scaffolded code. Now, I have access to the parameters specified in the file name on dollar sign route dot params. As you can see, whatever I have between the square brackets in my file name is what the name of the parameter will be on rel params.
All right, let's check that out in the browser. I can visit slash movies slash one, two, three. And we get a four of four. I think the server restart is the culprit again.
So let's restart the server quickly. Whoops, I also forgot to put this inside of the mustache syntax. Perfect. Now that ID is printed to the page.
Not only can we use these dynamic parameters inside of the file names, but we can also use these dynamic parameters as directory names as well. This allows us to create some pretty expressive URLs. For instance, let's say I'm creating some kind of app where there are teams. And each of those teams is identified in some way, let's say by some kind of slug.
And on these teams are a number of users that we can see more information on or edit and so on by providing their ID. How might we support this URL structure with the file-based routing? Inside of pages, I'll create a directory called teams, and then a directory called team slug, but with square brackets around it. Remember, this means that this part of the URL is going to be a dynamic parameter.
Next, I can create a folder called users. And then finally, a file called user ID in square brackets dot view. From this page now, we'll be able to tell what team the user is on and the ID of the current user. In the browser, when we actually navigate to the route we worked out earlier, perfect.
You can see that I'm on team my team, which was the dynamic parameter, and that my user ID is the ID from the URL. Finally, if you need access to these route parameters inside of script setup instead of directly inside of the template, you can access those with the useRoute composable. To demonstrate, let's move our message up to a computed prop. Notice that I didn't have to import useRoute or the computed function.
That's because Nuxt is able to automatically import all kinds of composables. That is, composables from your dependencies, built-in Nuxt composables, and even, as we'll see a little later, composables that you write yourself. Furthermore, Nuxt auto-imports all the composition API functions made available from Vue, so you can do things like create reactive graphs or computed props super easily. Back in the browser, this looks exactly as it did before.