Nommage des Routes Vue Router : Règles et Enum

Organisation optimale des noms de routes dans Vue Router pour les projets à grande échelle

Dans les applications Vue réelles avec de nombreux écrans et un développement en équipe, les exemples simples de la documentation de Vue Router posent problème. S'appuyer sur des chemins sous forme de chaînes complique la refactorisation et introduit des bugs. Deux règles clés rendent le routage robuste : l'utilisation obligatoire de name pour chaque route et le stockage centralisé des noms dans une énumération ou un objet constant.

Cela découple la logique de navigation de la structure des URL, simplifiant les modifications et minimisant les erreurs.

Utilisation obligatoire de name : Indépendance par rapport au chemin

Les transitions via path lient étroitement le code à la structure actuelle des URL. Exemple tiré de la documentation :

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

La navigation router.push('/user/basov') cassera si elle est changée en /profile/:username. Avec name, cela est résolu :

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

Le routeur lui-même substituera le chemin actuel. Ceci est crucial pour <router-link>, où sans name, la refactorisation nécessite des modifications dans tout le projet.

Centralisation des noms dans une énumération ou un objet

Le codage en dur de chaînes comme 'profile' conduit à des fautes de frappe, des doublons et une refactorisation difficile. Extrayez les noms dans un module séparé.

Énumération TypeScript :

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

Objet JavaScript :

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

Utilisation :

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

L'IDE fournira l'autocomplétion, TypeScript — la vérification de type à la compilation.

Comparaison des approches avec exemples

Sans règles :

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

// Composant B
<router-link to="/user/settings">Paramètres</router-link>;

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

Changer /user/list en /users/all nécessite une recherche globale de chaînes. Les fautes de frappe comme /User/List passent inaperçues jusqu'à l'exécution.

Avec règles :

// 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 },

Refactorisation : vous changez seulement le path, le name reste. Toutes les transitions fonctionnent, les fautes de frappe sont éliminées.

| Aspect | Sans règles | Avec règles |

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

| Emplacement des noms | Dispersé dans le projet | Centralisé |

| Refactorisation du chemin | Recherche globale de chaînes | Changement en un seul endroit |

| Fautes de frappe | À l'exécution | À la compilation |

| Vue d'ensemble des routes | Difficile | Visible immédiatement |

Avantages en production

• Évolutivité : Dans les projets avec 50+ routes, les noms centralisés simplifient l'intégration des nouveaux développeurs.
• Revue de code : Facile de vérifier la navigation via l'énumération.
• Tests : Simuler les routes par nom, pas par chemin.

Appliquez les règles dès le début du projet :

• Attribuez un name à chaque route.
• Stockez les noms dans une énumération/objet.
• Utilisez uniquement la navigation nommée dans router.push et <router-link>.

Points clés à retenir

• name protège contre les cassures lors de la refactorisation de la structure des URL.
• L'énumération/constantes élimine les fautes de frappe et assure l'autocomplétion.
• La centralisation simplifie l'audit et la maintenance du routage.
• L'approche fonctionne en JS/TS, compatible avec Vue 3 Router.
• Économise du temps de débogage dans les grandes équipes.

— Editorial Team