Как правильно называть маршруты в Vue Router: два простых правила, которые спасут ваш проект

[DmitryKazakov8]

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

это не спасет от пересечений имен, так как они заводятся в массиве. Чтобы TS исключал пересечения, нужна объектная структура

createConfigs({
  users: { path: '/users', loader: () => import('./pages/users') },
  user: { path: '/user', loader: () => import('./pages/user') },
  userSettings: { path: '/user/settings', loader: () => import('./pages/userSettings') }
});

// autocomplete + fast travel: 'users' | 'user' | 'userSettings'
router.redirect({ name: 'user' });

В остальном согласен со статьей - по name куда удобнее редиректить в больших проектах, чем по untyped path.

[Pnym]

Спасибо, такое объявление роутеров через объектную конфигурацию еще не видел, интересный подход)

Честно говоря, с проблемой пересечения имен сталкиваться не приходилось, так как роутеры у меня строго разделены по фича-модулям. Плюс придерживаюсь правила: префикс name всегда беру из названия файла/папки (например, UserList, UserProfile в модуле User)

user.routes.ts

export enum UserRouteName {

  UserList = 'user-list',

  UserProfile = 'user-profile',

}

...

[UltraPokemon]

Если лень писать объект для сотен роутов проекта - можно положиться на типизацию, путем использования либы https://www.npmjs.com/package/vue-routes-to-types или возможностей файлового роутинга, который идёт из коробки во vue-router сейчас.

PS: не встречал коллизий именно имён роутов (с конфликтующими paths сталкивался - то ещё удовольствие).