Agrupado de rutas en Vue Router: Rutas Hijas, prefijo y Componente - 49

Agrupamos las rutas de tipo CRUD bajo un mismo prefijos y componentes en común.

Vamos a agrupar estas rutas no tanto porque sean necesario u obligatorio ya que es una aplicación pequeña y la podemos dejar perfectamente de esta forma o directamente si la quieres modificar la pues colocar a cada uno dashboard o lo que tú quieras ya que son con nombre entonces solamente el cambio sería por acá ya que en el resto la referenciamos por su nombre pero pienso que resulta una buena idea de que precisamente Cuando tenemos rutad con una característica en común que en este caso son rutas de tipo crud para el dashboard agruparlas ya que esto ayuda tanto a la legibilidad como la escabiladero no tengamos que modificar un cambio en común no tengamos que modificar una a una cada una de estas rutas si no la podemos definir un cambio de manera global por ejemplo para indicarle un prefijo algo de esa forma:

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
            }
        ]
    }
]

Fíjate que es un poco rara la sintaxis ya que si aquí colocamos children lo lógico sería colocarle al mismo nivel pero realmente la ruta agrupada es todo esto entonces aquí colocamos es decir desde esta en mi caso sería la línea nu ya viene siendo todas las rutas agrupadas y por lo tanto ahí va la configuración no va aquí dentro aquí solamente colocamos nuestras rutas aquí ya podemos colocar un path:

{
    path: '/dashboard',

Componente raiz

También acá aquí en caso de pudiéramos definir un componente que lo que es es sería una ruta un componente como el de como el de App un componente como el de a. viw es lo que pudiéramos colocar acá:

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

De esta forma puedes definir un estilo en común para las rutas agrupadas:

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

In english

• Categoría
• /
• Vue
• /
• Agrupado de rutas en Vue Router: Rutas Hijas, prefijo y Componente - 49