Nazewnictwo tras Vue Router: reguły i enum

Optymalna organizacja nazw tras w Vue Router dla dużych projektów

W rzeczywistych aplikacjach Vue z wieloma ekranami i pracą zespołową proste przykłady z dokumentacji Vue Router prowadzą do problemów. Zależność od ścieżek tekstowych utrudnia refaktoryzację i powoduje błędy. Dwie kluczowe zasady pozwalają uczynić routing odpornym: obowiązkowe używanie name dla każdej trasy oraz scentralizowane przechowywanie nazw w enum lub obiekcie stałym.

To oddziela logikę nawigacji od struktury URL, upraszczając zmiany i minimalizując błędy.

Obowiązkowe nadawanie name: niezależność od path

Przejścia przez path sztywno wiążą kod z aktualną strukturą URL. Przykład z dokumentacji:

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

Nawigacja router.push('/user/basov') przestanie działać po zmianie na /profile/:username. Z name rozwiązuje się to:

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

Router sam podstawi aktualny path. To kluczowe dla <router-link>, gdzie bez name refaktoryzacja wymaga zmian w całym projekcie.

Centralizacja nazw w enum lub obiekcie

Twarde kodowanie ciągów takich jak 'profile' prowadzi do literówek, duplikatów i trudnej refaktoryzacji. Wyodrębnij nazwy do osobnego modułu.

TypeScript enum:

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

Obiekt JavaScript:

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

Użycie:

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

IDE zapewni autouzupełnianie, TypeScript — sprawdzanie typów na etapie kompilacji.

Porównanie podejść na przykładach

Bez zasad:

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

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

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

Zmiana /user/list na /users/all wymaga globalnego wyszukiwania ciągów. Literówki jak /User/List pozostają niezauważone do czasu wykonania.

Z zasadami:

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

Refaktoryzacja: zmieniasz tylko path, name pozostaje. Wszystkie przejścia działają, literówki wykluczone.

| Aspekt | Bez zasad | Z zasadami |

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

| Lokalizacja nazw | Rozproszona po projekcie | Scentralizowana |

| Refaktoryzacja path | Globalne wyszukiwanie ciągów | Zmiana w jednym miejscu |

| Literówki | Wykonanie | Kompilacja |

| Przegląd tras | Trudny | Widoczny od razu |

Zalety w produkcji

• Skalowalność: W projektach z 50+ trasami scentralizowane nazwy ułatwiają onboard nowych deweloperów.
• Code review: Łatwo sprawdzić nawigację przez enum.
• Testowanie: Mockowanie tras po nazwach, nie po path.

Stosuj zasady od początku projektu:

• Nadawaj name dla każdej trasy.
• Przechowuj nazwy w enum/obiekcie.
• Używaj tylko nazwanej nawigacji w router.push i <router-link>.

Co jest ważne

• name chroni przed awariami przy refaktoryzacji struktury URL.
• Enum/stałe wykluczają literówki i zapewniają autouzupełnianie.
• Centralizacja upraszcza audyt i utrzymanie routingu.
• Podejście działa w JS/TS, kompatybilne z Vue 3 Router.
• Oszczędza czas na debugowanie w dużych zespołach.

— Editorial Team