Rutas dinámicas con NuxtJS

Clase 4 de 21 • Curso de Server Side Rendering con Nuxt 2

Irving Caamal

student•

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

student•

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

student•

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

Jesus David Gil

student•

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}}

Carlos Rodríguez

student•

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

student•

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

Fabricio Orrala

student•

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

student•

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

Fabricio Orrala

student•

Entendido, muchas gracias!

Santiago Velásquez Serna

student•

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