Child routes in Vue Router

The routing system in Vue is a fundamental feature that allows navigation between different pages or components in a single page application (SPA). Vue uses a library called Vue Router to handle routing.

The routing system in Vue is based on a configuration file where the routes to be used and their associated component are stored; routes can be set specific parameters and conditions for each route.

When a user navigates to a specific route in a Vue application, the route system takes care of loading the corresponding component and rendering it in the main view. This allows you to create a fluid and dynamic user experience, where page changes are made instantly without having to reload the entire application.

We are going to know how to create child routes or subroutes in Vue Router; through this mechanism we can group our routes components based on the same child or sub-child of the main route component; for that, we have an option called children that allows us to create just one child component; In addition to this, you have to define a base component and the path of your child component; remember that for this, you need to know how to work with the 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,
});

As you can see, you can define the rest of your routes whether they have the characteristics of child routes or the traditional ones.

In the child component, as you can see, we define its own router-link so that with this the respective content of our child routes can appear:

Base.vue

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

13-08-2023 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Child routes in Vue Router