Rutas dinámicas con NuxtJS

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

Contenido 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

21
Despedida del curso
02:18 min

Tomar examen

Comentarios

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

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

Anyami Cornieles

student••

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

&lt;template&gt;
    <p>{{ slug }}</p>
&lt;/template&gt;

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

    const slug = route.params.slug as string
&lt;/script&gt;

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

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

Anyami Cornieles

student•

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

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!

&lt;template&gt;
    <p>{{ slug }}</p>
&lt;/template&gt;

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

    const slug = route.params.slug as string
&lt;/script&gt;

Rutas dinámicas con NuxtJS

Fundamentos de NuxtJS

Introducción a Nuxtjs

Características de NuxtJS

Cómo crear un proyecto con NuxtJS

Rutas y Componentes con NuxtJS