В официальной документации Vue Router часто приводят достаточно простые примеры:

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

На первый взгляд всё логично. Но короткие примеры в доках созданы, чтобы показать синтаксис, а не хорошие практики. В реальном проекте, где десятки экранов, несколько разработчиков и сотни переходов, такой подход быстро превращается в источник багов и головной боли.

Давайте разберём два простых правила, которые сделают работу с роутингом безопасной и приятной.

Первое правило: всегда задавайте name

Казалось бы, зачем оно нужно, если есть path? Ответ прост: path меняется, а name остаётся.

Когда вы переходите по маршруту через path:

router.push('/user/basov')

вы жёстко привязываетесь к структуре URL. Стоит вам изменить путь на /profile/:username - как все переходы в проекте сломаются.
С name всё иначе:

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

Вы говорите роутеру: "Открой экран профиля, а как именно он называется в адресной строке - не твоё дело". Роутинг становится устойчивым к рефакторингу, а компоненты перестают зависеть от структуры URL.

Без name вы теряете возможность безопасно использовать <router-link>.

Второе правило: храните имена в enum (или константном объекте)

Хардкод строк вроде 'profile', 'UserProfile', 'user-profile' выглядит безобидно ровно до тех пор, пока вы не столкнётесь с опечаткой, дублированием или массовым переименованием.

Вместо этого вынесите имена отдельно:

TypeScript (enum)

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

И используйте их везде:

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

Пример 1: Как выглядит проект без этих правил

// Компонент A
router.push('/user/list')

// Компонент B
<router-link to="/user/settings">Настройки</router-link>

// Компонент C
if (route.path === '/user/profile') { ... }

Что происходит, когда URL меняется?

• Вы меняете /user/list на /users/all

• Ищете по проекту строку /user/list (а вдруг кто-то написал /User/List?)

• Пропускаете один файл

• В продакшене кнопка "Пользователи" ведёт в никуда

• Отладка, поиск, коммиты, стыд.

Пример 2: Как выглядит проект с правилами

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

// Любой компонент
router.push({ name: RouteNames.UserList })

Что происходит при рефакторинге?

• Вы меняете path: '/users/all' на path: '/user/list'

• name остаётся тем же

• Ни один переход не ломается

• IDE подсказывает имена через автодополнение

• Опечатки невозможны

Почему это работает

Документация показывает как написать, а не как поддерживать. Два правила, которые стоит запомнить:

1. Всегда задавайте name - чтобы отделить логику навигации от структуры URL.

2. Всегда выносите name в enum/константы - чтобы избавиться от хардкода, опечаток и боли при рефакторинге.

Это не серебряная пуля, но это та привычка, которая экономит часы отладки, упрощает код-ревью и делает проект предсказуемым. Начните использовать её с первого дня нового проекта - и ваше "будущее я" скажет спасибо.