Pojmenování tras Vue Router: pravidla a enum

Optimální organizace názvů tras ve Vue Router pro velké projekty

Ve skutečných Vue aplikacích s mnoha obrazovkami a týmovým vývojem vedou jednoduché příklady z dokumentace Vue Router k problémům. Závislost na řetězcových cestách komplikuje refaktorování a způsobuje chyby. Dvě klíčová pravidla umožňují vytvořit odolné směrování: povinné použití name pro každou trasu a centralizované ukládání názvů v enum nebo konstantním objektu.

Tím se oddělí navigační logika od struktury URL, což zjednodušuje změny a minimalizuje chyby.

Povinné zadání name: nezávislost na path

Přechody podle path pevně vážou kód k aktuální struktuře URL. Příklad z dokumentace:

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

Navigace router.push('/user/basov') se rozbije při změně na /profile/:username. S name se to řeší:

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

Router sám dosadí aktuální path. To je klíčové pro <router-link>, kde bez name vyžaduje refaktorování úpravy v celém projektu.

Centralizace názvů v enum nebo objektu

Pevně zadané řetězce jako 'profile' vedou k překlepům, duplicitám a složitému refaktorování. Vyčleňte názvy do samostatného modulu.

TypeScript enum:

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

JavaScript objekt:

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

Použití:

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

IDE poskytne automatické doplňování, TypeScript — kontrolu typů ve fázi kompilace.

Srovnání přístupů na příkladech

Bez pravidel:

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

// Komponent B
<router-link to="/user/settings">Nastavení</router-link>;

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

Změna /user/list na /users/all vyžaduje globální vyhledávání řetězců. Překlepy jako /User/List zůstanou nepovšimnuty až do runtime.

S pravidly:

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

Refaktorování: měníte pouze path, name zůstává. Všechny přechody fungují, překlepy jsou vyloučeny.

| Aspekt | Bez pravidel | S pravidly |

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

| Umístění názvů | Rozptýleno po projektu | Centralizovaně |

| Refaktorování path | Globální vyhledávání řetězců | Změna na jednom místě |

| Překlepy | Runtime | Kompilace |

| Přehled tras | Složité | Viditelné ihned |

Výhody v produkci

• Škálovatelnost: V projektech s 50+ trasami centralizované názvy zjednodušují onboard nových vývojářů.
• Code review: Snadno zkontrolovat navigaci podle enum.
• Testování: Mockování tras podle názvů, ne podle path.

Aplikujte pravidla od začátku projektu:

• Zadávejte name pro každou trasu.
• Ukládejte názvy v enum/objektu.
• Používejte pouze pojmenovanou navigaci v router.push a <router-link>.

Co je důležité

• name chrání před poruchami při refaktorování struktury URL.
• Enum/konstanty vylučují překlepy a zajišťují automatické doplňování.
• Centralizace zjednodušuje audit a údržbu směrování.
• Přístup funguje v JS/TS, je kompatibilní s Vue 3 Router.
• Šetří čas na ladění ve velkých týmech.

— Editorial Team