Rutas hijas en Vue Router

El sistema de ruteo en Vue es una característica fundamental que permite la navegación entre diferentes páginas o componentes en una aplicación de una sola página (SPA). Vue utiliza una biblioteca llamada Vue Router para manejar el enrutamiento.

El sistema de ruteo en Vue se basa en un archivo de configuración en donde se almacenan las rutas a emplear y su componente asociado; a las rutas se les pueden establecer parámetros y condiciones específicas para cada ruta.

Cuando un usuario navega a una ruta específica en una aplicación Vue, el sistema de ruteo se encarga de cargar el componente correspondiente y renderizarlo en la vista principal. Esto permite crear una experiencia de usuario fluida y dinámica, donde los cambios de página se realizan de forma instantánea sin tener que recargar toda la aplicación.

Vamos a conocer como crear rutas hijas o subrutas en Vue Router; mediante este mecanismo podemos agrupar nuestras rutas en base a un mismo componente hijo o subhijo el componente principal de rutas; para eso, tenemos una opción llamada children que nos permite crear justamente un componente hijo; aunado a esto, tienes que definir un componente base y el path de tu componente hijo; recuerda que para estto, necesitas saber como trabajar con las rutas en Vue

export const routes = [
   {
       name: 'home',
       path: '/test',
       component: Home
   },
   {
       path: '/academia',
       component: Base,
       children: [
           {
               name: 'index',
               path: '',
               component: Index
           },
           {
               name: 'my-courses',
               path: 'my-courses',
               component: MyCourses
           },
           {
               name: 'detail',
               path: ':slug/:s?/:c?',
               component: Detail
           },
           {
               name: 'register',
               path: 'register',
               component: Register
           },
           {
               name: 'login',
               path: 'login',
               component: Login
           }
       ]
   }
];
const router = createRouter({
   history: createWebHistory(),
   routes: routes,
});

Tal cual puedes ver, puedes definir el resto de tus rutas ya sean que tengan la características de rutas hijas o las tradicionales.

En el componente hijo, como puedes ver, le definimos su propio router-link para que con esto pueda aparecer el contenido respectivo de nuestras rutas hijas:

Base.vue

<template>
 <div>
   <router-link :to="{name:'my-courses'}">Mis cursos</router-link>
   <router-view></router-view>
 </div>
</template>

15-11-2021 - Andrés Cruz

In english

• Categoría
• /
• Vue
• /
• Rutas hijas en Vue Router