Программная навигация

↑ 5.1 Vue Router · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

push против replace, обработка результата навигации и передача состояния.

Объяснение

const router = useRouter();
 
router.push("/orders");
router.push({ name: "order", params: { id: 5 }, query: { tab: "items" }, hash: "#comments" });
router.replace({ name: "login" });          // без записи в историю (кнопка «назад» не вернёт)
router.go(-1); router.back(); router.forward();
 
const failure = await router.push({ name: "order", params: { id } });     // NavigationFailure или undefined
if (isNavigationFailure(failure, NavigationFailureType.duplicated)) { /* уже здесь */ }
 
// Обновление query без перезагрузки данных
router.replace({ query: { ...route.query, page: 2 } });

Метод	Особенности
push	добавляет запись в историю
replace	заменяет текущую
go(n), back, forward	перемещение по истории
resolve(to)	получить href/route без перехода
router.currentRoute	реактивный текущий маршрут
router.addRoute/removeRoute	динамические маршруты (например, по правам)

Передача данных: params (в пути), query (для фильтров, сортировки, пагинации — сохраняется в URL и ссылке), state (History state, не в URL, только для внутренних случаев). Не передавайте сложные объекты через params.

Состояние страницы в URL: фильтры/страница/сортировка в query делают ссылки шаринговыми и кнопку «назад» осмысленной; VueUse useRouteQuery.

Редиректы после логина: router.push(route.query.redirect as string || "/") (валидируйте redirect — защита от open redirect).

Нюансы и подводные камни

• Повторный переход на тот же маршрут возвращает NavigationFailure (не исключение).
• push с path игнорирует params: используйте name.
• Гонка нескольких push подряд: побеждает последний.
• Открытые редиректы: проверяйте, что путь относительный.
• Query-значения всегда строки; массивы для повторяющихся ключей.

Практика

1. Синхронизируйте фильтры таблицы с query-параметрами.
2. Реализуйте редирект на исходную страницу после логина.
3. Динамически добавьте маршруты по ролям через addRoute.

Вопросы с ответами

push или replace?

push добавляет запись в историю, replace заменяет текущую (например, после логина или для обновления query).

Зачем хранить фильтры в query?

Состояние сохраняется в ссылке и при обновлении, работает «назад/вперёд» и шаринг.

Связанные темы

• Динамические и вложенные маршруты
• Navigation guards