Introducción

En aplicaciones Vue.js, a menudo necesitamos estructurar nuestras rutas de manera jerárquica para reflejar la estructura de nuestra aplicación. Las rutas anidadas (nested routes) nos permiten definir rutas dentro de otras rutas, lo que facilita la creación de aplicaciones complejas con múltiples niveles de navegación.

Conceptos Clave

Rutas Padre e Hijo: Las rutas anidadas se definen dentro de una ruta padre. La ruta padre contiene un <router-view> donde se renderizarán las rutas hijas.
Componentes Anidados: Cada ruta hija puede tener su propio componente, que se renderizará dentro del componente de la ruta padre.

Configuración de Rutas Anidadas

Paso 1: Definir las Rutas

Primero, definimos nuestras rutas en el archivo de configuración de rutas (por ejemplo, src/router/index.js).

import Vue from 'vue';
import Router from 'vue-router';
import ParentComponent from '@/components/ParentComponent.vue';
import ChildComponent from '@/components/ChildComponent.vue';
import AnotherChildComponent from '@/components/AnotherChildComponent.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/parent',
      component: ParentComponent,
      children: [
        {
          path: 'child',
          component: ChildComponent
        },
        {
          path: 'another-child',
          component: AnotherChildComponent
        }
      ]
    }
  ]
});

Paso 2: Crear los Componentes

Creamos los componentes que se utilizarán en las rutas. Aquí hay un ejemplo básico de cómo podrían verse estos componentes.

ParentComponent.vue

<template>
  <div>
    <h2>Parent Component</h2>
    <router-view></router-view> <!-- Aquí se renderizarán las rutas hijas -->
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
};
</script>

ChildComponent.vue

<template>
  <div>
    <h3>Child Component</h3>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

AnotherChildComponent.vue

<template>
  <div>
    <h3>Another Child Component</h3>
  </div>
</template>

<script>
export default {
  name: 'AnotherChildComponent'
};
</script>

Paso 3: Navegar entre Rutas Anidadas

Podemos navegar entre las rutas anidadas utilizando enlaces de navegación (<router-link>).

ParentComponent.vue (actualizado)

<template>
  <div>
    <h2>Parent Component</h2>
    <nav>
      <router-link to="/parent/child">Go to Child</router-link>
      <router-link to="/parent/another-child">Go to Another Child</router-link>
    </nav>
    <router-view></router-view> <!-- Aquí se renderizarán las rutas hijas -->
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
};
</script>

Ejercicio Práctico

Ejercicio

Crea un nuevo componente llamado NestedParentComponent.vue.
Dentro de NestedParentComponent.vue, define dos rutas hijas: NestedChildOne.vue y NestedChildTwo.vue.
Configura las rutas en el archivo de configuración de rutas.
Añade enlaces de navegación en NestedParentComponent.vue para navegar entre las rutas hijas.

Solución

NestedParentComponent.vue

<template>
  <div>
    <h2>Nested Parent Component</h2>
    <nav>
      <router-link to="/nested-parent/child-one">Go to Child One</router-link>
      <router-link to="/nested-parent/child-two">Go to Child Two</router-link>
    </nav>
    <router-view></router-view> <!-- Aquí se renderizarán las rutas hijas -->
  </div>
</template>

<script>
export default {
  name: 'NestedParentComponent'
};
</script>

NestedChildOne.vue

<template>
  <div>
    <h3>Nested Child One</h3>
  </div>
</template>

<script>
export default {
  name: 'NestedChildOne'
};
</script>

NestedChildTwo.vue

<template>
  <div>
    <h3>Nested Child Two</h3>
  </div>
</template>

<script>
export default {
  name: 'NestedChildTwo'
};
</script>

src/router/index.js (actualizado)

import Vue from 'vue';
import Router from 'vue-router';
import NestedParentComponent from '@/components/NestedParentComponent.vue';
import NestedChildOne from '@/components/NestedChildOne.vue';
import NestedChildTwo from '@/components/NestedChildTwo.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/nested-parent',
      component: NestedParentComponent,
      children: [
        {
          path: 'child-one',
          component: NestedChildOne
        },
        {
          path: 'child-two',
          component: NestedChildTwo
        }
      ]
    }
  ]
});

Conclusión

Las rutas anidadas en Vue Router nos permiten estructurar nuestras aplicaciones de manera jerárquica y modular. Al entender cómo definir y utilizar rutas anidadas, podemos crear aplicaciones más organizadas y fáciles de mantener. En el siguiente módulo, exploraremos las guardias de navegación, que nos permitirán controlar el acceso a nuestras rutas y mejorar la seguridad y la experiencia del usuario.

Rutas Anidadas

Introducción

Conceptos Clave

Configuración de Rutas Anidadas

Paso 1: Definir las Rutas

Paso 2: Crear los Componentes

Paso 3: Navegar entre Rutas Anidadas

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js