Cursos Empresas Blog Live Conf Eventos Precios

0:0013:09

Rutas dinámicas con NuxtJS

Curso de Server Side Rendering con Nuxt 2

Clase 4 de 21

Clase 4 / 21

<template>
    <p>{{ slug }}</p>
</template>

<script setup  lang="ts">
import { useRoute } from 'vue-router';
    
    const route = useRoute()

    const slug = route.params.slug as string
</script>

Comentarios (9)9 comentarios

Irving Caamal

Hace 4 años

File System routing es una maravilla, te evita todo el boilerplate necesario cuando usas vue-router, acá la documentación:

https://nuxtjs.org/docs/features/file-system-routing/

Carlos Perilla

En Nuxt 3, debe habilitarse con 'pages: true' en nuxt.config.ts, y el parametro en lugar de indicarse _param.vue se indica [param].vue

Más información: https://nuxt.com/docs/getting-started/routing

Ángel Alfredo Guzmán

Super práctico! Y además ayuda a normalizar la estructura del proyecto

Jesus David Gil

Para tener una ruta con varios parámetros puede ser así:

series/
--| _category/
------| _slug.vue

/series/comedy/wednesday

// comedy
{{$route.params.category}} 
// wednesday 
{{$route.params.slug}}

Santiago Velásquez Serna

Hace 3 años

En nuxt 3 las rutas dinamicas se definen asi [id].vue y se accede con vue 3: useRoute().params.id

Anyami Cornieles

Hace 8 meses•editado

Gracias! Yo he nombrado el archivo como [slug].vue y tiene esto:

< = menor &gt = > mayor No se porque me daña los signos

Carlos Rodríguez

Nuxt es una maravilla pero webpack es una total pesadilla que crea mucha desesperación, esperemos con ansias que Nuxt V3 que sea usado con Vite.

David Higuera

Está genial, incluso permite hacer anidamiento y seguir utilizando parámetros de ruta :o

Hace 8 meses

En Nuxt 3, he puesto en mi app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Es importante el NuxtPage para que se puedan renderizar las pages.

Fabricio Orrala

Como puedo hacer para rutas específicas. Digamos tengo toda una plataforma donde tengo login, logout, reset-password, register, welcome, main, search, profile, articles, user, etc. Recomiendas tener todo en la raiz de la carpeta pages? O podríamos organizar algo como:

access/login
access/logout
access/welcome
user/profile
user/reset-password

etc

Pero como hago para que las carpetas estén organizadas y no me afecte el path o la URL?

Diana Martinez

Puedes organizar la carpeta pages con la estructura que quieras, la URL representará esa estructura.

Entendido, muchas gracias!

Rutas dinámicas con NuxtJS

Progreso del curso

Fundamentos de NuxtJS

Rutas y Componentes con NuxtJS

Backend con Airtable y Netlify Functions

Consumo de nuestro backend con Netlify

Cierre del curso