Vue Academy · Lección

Rutas anidadas y dinámicas

Cree layouts anidados y parámetros de ruta dinámicos

Rutas anidadas y dinámicas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

Más allá de las rutas estáticas

Las aplicaciones reales necesitan rutas que transporten datos y se aniden dentro de diseños.

Los segmentos dinámicos capturan valores como un id
Las rutas anidadas representan rutas secundarias dentro de una ruta principal
Las rutas con nombre y la navegación programática aportan flexibilidad

Segmentos de ruta dinámicos

Los dos puntos definen un segmento dinámico que coincide con cualquier valor.

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

Acceder a route.params

Lea el valor capturado mediante route.params.

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

Reaccionar a los cambios de parámetros

Cuando solo cambia el parámetro, por ejemplo, de /user/1 a /user/2, el componente se reutiliza. Observe el parámetro para volver a cargar los datos.

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Varios segmentos dinámicos

Las rutas pueden tener varias partes dinámicas.

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

Rutas anidadas

Las rutas anidadas permiten representar rutas secundarias dentro de un componente principal.

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

router-view anidado

El componente principal necesita su propio router-view para representar las rutas secundarias.

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

Rutas con nombre

Asigne un name a una ruta para referirse a ella sin escribir la ruta directamente.

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

Enlazar por nombre

router-link puede apuntar a una ruta con nombre y pasar los parámetros como un objeto.

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

Navegación programática

Navegue desde JavaScript con el método push del router.

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

Otros métodos de navegación

El router ofrece más métodos auxiliares de navegación:

router.push añade una nueva entrada al historial
router.replace navega sin añadir una nueva entrada al historial
router.back vuelve a la página anterior

Comprobación rápida

Compruebe su comprensión de las rutas dinámicas y anidadas.

Resumen: rutas anidadas y dinámicas

Ha aprendido enrutamiento avanzado:

Los segmentos dinámicos (/user/:id) se capturan en route.params
Las rutas anidadas se definen mediante children y un router-view anidado
Las rutas con nombre permiten enlazar por nombre
router.push permite navegar mediante código

A continuación: guardas de navegación.

Preguntas frecuentes

¿La lección «Rutas anidadas y dinámicas» es gratis?

Sí — el texto completo de «Rutas anidadas y dinámicas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Rutas anidadas y dinámicas»?

Cree layouts anidados y parámetros de ruta dinámicos Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Rutas anidadas y dinámicas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy