Route Grouping in Vue Router: Child Routes, Prefix and Component - 49

We group CRUD type routes under the same prefixes and common components.

We are going to group these routes not so much because they are necessary or mandatory since it is a small application and we can leave it perfectly this way or directly if you want to modify it, then place each one as a dashboard or whatever you want since they are named, then the only change would be here since in the rest we reference it by name, but I think it is a good idea that precisely when we have routes with a common characteristic, which in this case are crud type routes for the dashboard, group them since this helps both readability and escapism, we do not have to modify a common change, we do not have to modify each of these routes one by one if we cannot define a change globally, for example to indicate a prefix, something like that:

const routes = [
    {
        path: '/dashboard',
        component: Base,
        children: [
            {
                name: 'movie.list',
                path: 'movie',
                component: ListMovie
            },
            {
                name: 'movie.save',
                path: 'movie/save',
                component: SaveMovie
            },
            {
                name: 'movie.save',
                path: 'movie/save/:id?',
                component: SaveMovie
            },
            {
                name: 'category.list',
                path: 'category',
                component: ListCategory
            },
            {
                name: 'category.save',
                path: 'category/save',
                component: SaveCategory
            },
            {
                name: 'category.save',
                path: 'category/save/:id?',
                component: SaveCategory
            }
        ]
    }
]

Note that the syntax is a bit strange since if we put children here the logical thing would be to place it at the same level but really the grouped route is all this so here we put that is to say from this in my case it would be the nu line since it is all the grouped routes and therefore the configuration goes there, it does not go here inside here we only put our routes here we can now put a path:

{
    path: '/dashboard',

Root component

Also here, if we could define a component, what it is would be a route, a component like that of App, a component like that of a. viw, that is what we could place here:

    {
        path: '/dashboard',
        component: Base,

This way you can define a common style for the grouped routes:

src/components/CRUD/Base.vue

<template>
<div class="container mx-auto my-3">
   <router-view></router-view>
 </div>
</template>

13-03-2025 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Route Grouping in Vue Router: Child Routes, Prefix and Component - 49