intermediate

Vue Router

Моделируйте route records, nested routes, params, query, navigation guards и lazy route components.

Vue Router сопоставляет URL с компонентами через route records: paths, вложенные children, named views, params, query и meta. Navigation guards (`beforeEach`, per-route) контролируют доступ и загрузку данных.

					const routes = [
  { path: '/users/:id', component: UserView, props: true },
  { path: '/admin', component: AdminLayout, children: [...] },
];

Lazy `() => import('./Page.vue')` делит бандлы по маршрутам. Программная навигация — `router.push` с типизированными params в TypeScript.

На интервью: params vs query, nested routes и outlets, порядок guards, по возможности без тяжёлого fetch в guards.

Типовые ошибки: бесконечные redirect в guards, полный router state в Pinia, навигация без обработки rejected promises.

Компромисс: декларативные route tables против сложности guards, когда auth и загрузка данных переплетены.

Чеклист:

Явная модель nested routes.
meta для auth и title.
Lazy-load тяжёлых route components.
Обработка сбоев навигации в UI.