Rutas dinámicas con NuxtJS
Clase 4 de 21 • Curso de Server Side Rendering con Nuxt 2
Contenido del curso
Irving Caamal
student•
hace 4 años
Clase 4 de 21 • Curso de Server Side Rendering con Nuxt 2
Contenido del curso
Irving Caamal
Carlos Perilla
Ángel Alfredo Guzmán
Jesus David Gil
Santiago Velásquez Serna
Anyami Cornieles
Carlos Rodríguez
David Higuera
Anyami Cornieles
Fabricio Orrala
Diana Martinez
Fabricio Orrala
File System routing es una maravilla, te evita todo el boilerplate necesario cuando usas vue-router, acá la documentación:
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
Super práctico! Y además ayuda a normalizar la estructura del proyecto
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}}
En nuxt 3 las rutas dinamicas se definen asi [id].vue y se accede con vue 3: useRoute().params.id
Gracias! Yo he nombrado el archivo como [slug].vue y tiene esto:
<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>
< = menor &gt = > mayor No se porque me daña los signos
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.
Está genial, incluso permite hacer anidamiento y seguir utilizando parámetros de ruta :o
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.
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?
Puedes organizar la carpeta pages con la estructura que quieras, la URL representará esa estructura.
Entendido, muchas gracias!