Nombrado de Rutas de Vue Router: Reglas y Enum

Organización Óptima de Nombres de Rutas en Vue Router para Proyectos a Gran Escala

En aplicaciones Vue del mundo real con numerosas pantallas y desarrollo en equipo, los ejemplos simples de la documentación de Vue Router generan problemas. Depender de rutas de texto complica la refactorización e introduce errores. Dos reglas clave hacen que el enrutamiento sea robusto: el uso obligatorio de name para cada ruta y el almacenamiento centralizado de los nombres en una enumeración o un objeto constante.

Esto desacopla la lógica de navegación de la estructura de URL, simplificando los cambios y minimizando los errores.

Uso Obligatorio de name: Independencia de la ruta

Las transiciones mediante path vinculan estrechamente el código a la estructura actual de URL. Ejemplo de la documentación:

const routes = [
  {
    path: '/user/:username',
    component: User,
  }
]

La navegación router.push('/user/basov') fallará si se cambia a /profile/:username. Con name, esto se resuelve:

router.push({ name: 'profile', params: { username: 'john' } })

El propio router sustituirá la ruta actual. Esto es crítico para <router-link>, donde sin name, la refactorización requiere ediciones en todo el proyecto.

Centralización de Nombres en una Enumeración u Objeto

Codificar cadenas como 'profile' conduce a errores tipográficos, duplicados y refactorización difícil. Extrae los nombres a un módulo separado.

Enumeración TypeScript:

export enum RouteNames {
  Profile = 'profile',
  Dashboard = 'dashboard',
  Settings = 'settings',
}

Objeto JavaScript:

export const RouteNames = {
  UserList: 'user-list',
  UserSettings: 'user-settings',
  UserProfile: 'user-profile',
} as const;

Uso:

router.push({ name: RouteNames.Profile, params: { username: 'john' } });
<router-link :to="{ name: RouteNames.UserList }">Usuarios</router-link>;

El IDE proporcionará autocompletado, TypeScript — verificación de tipos en tiempo de compilación.

Comparación de Enfoques con Ejemplos

Sin reglas:

// Componente A
router.push('/user/list');

// Componente B
<router-link to="/user/settings">Configuración</router-link>;

// Componente C
if (route.path === '/user/profile') { /* ... */ }

Cambiar /user/list a /users/all requiere una búsqueda global de cadenas. Los errores tipográficos como /User/List pasan desapercibidos hasta el tiempo de ejecución.

Con reglas:

// routes/names.ts
export const RouteNames = {
  UserList: 'user-list',
  UserSettings: 'user-settings',
  UserProfile: 'user-profile',
} as const;

// routes/index.ts
{ path: '/users/all', name: RouteNames.UserList, component: UserList },

Refactorización: solo cambias el path, el name permanece. Todas las transiciones funcionan, se eliminan los errores tipográficos.

| Aspecto | Sin Reglas | Con Reglas |

|--------|------------|-------------|

| Ubicación de Nombres | Dispersos por el proyecto | Centralizados |

| Refactorización de Ruta | Búsqueda global de cadenas | Cambio en un lugar |

| Errores Tipográficos | Tiempo de ejecución | Compilación |

| Vista General de Rutas | Difícil | Visible inmediatamente |

Beneficios en Producción

• Escalabilidad: En proyectos con 50+ rutas, los nombres centralizados simplifican la incorporación de nuevos desarrolladores.
• Revisión de código: Fácil verificar la navegación mediante la enumeración.
• Pruebas: Simular rutas por nombre, no por ruta.

Aplica las reglas desde el inicio del proyecto:

• Asigna un name a cada ruta.
• Almacena los nombres en una enumeración/objeto.
• Usa solo navegación nombrada en router.push y <router-link>.

Conclusiones Clave

• name protege contra roturas al refactorizar la estructura de URL.
• Enumeración/constantes eliminan errores tipográficos y aseguran autocompletado.
• La centralización simplifica la auditoría y mantenimiento del enrutamiento.
• El enfoque funciona en JS/TS, compatible con Vue 3 Router.
• Ahorra tiempo de depuración en equipos grandes.

— Editorial Team