Nuxt•3d ago

Dynamic routes examples

Can I get a sample when using a dynamic route?

2 Replies

Hi @o.m. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Certainly! I'd be happy to provide you with examples of dynamic routes in Nuxt. Dynamic routes are a powerful feature that allows you to create flexible and reusable page components. Here's a sample of how to use dynamic routes in Nuxt: 1. Create a file with square brackets in its name to define a dynamic segment:

pages/
--| users/
-----| [id].vue

pages/
--| users/
-----| [id].vue

In this example, [id] is the dynamic part of the route. 2. In your [id].vue file, you can access the dynamic parameter using the useRoute() composable:

<script setup>
const route = useRoute()
const userId = route.params.id
</script>

<template>
  <div>
    <h1>User {{ userId }}</h1>
  </div>
</template>

<script setup>
const route = useRoute()
const userId = route.params.id
</script>

<template>
  <div>
    <h1>User {{ userId }}</h1>
  </div>
</template>

This setup will match routes like /users/1, /users/2, etc., and userId will contain the value of the dynamic segment. For more complex scenarios, you can also use catch-all routes. Here's an example:

pages/
--| articles/
-----| [...slug].vue

pages/
--| articles/
-----| [...slug].vue

This will match any route under /articles/, such as /articles/2023/best-practices. You can access the parameters like this:

<script setup>
const route = useRoute()
console.log(route.params.slug) // ['2023', 'best-practices']
</script>

<script setup>
const route = useRoute()
console.log(route.params.slug) // ['2023', 'best-practices']
</script>

These examples are based on the information from Nuxt Documentation on Routing (https://nuxt.com/docs/getting-started/routing). Remember that Nuxt automatically generates the router configuration based on your file structure in the pages/ directory, making it easy to create dynamic routes without additional configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@674984670156423171> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Dynamic routes examples