Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке $router.push?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`$router.push`** - метод Vue Router, який дозволяє програмно перейти на інший маршрут без перезавантаження сторінки. **Ключове:** на відміну від router-link, це навігація через JavaScript, і push додає новий запис в історію браузера.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`$router.push` - це метод Vue Router, який дозволяє **програмно перейти на інший маршрут** (іншу "сторінку" в SPA) *без перезавантаження сторінки*. Простіше кажучи: > `$router.push()` **- це спосіб навігації через JavaScript, а не через** `<router-link>`**.** --- ## Де використовується? - перехід на сторінку після дії користувача - редирект після логіну - кнопки типу "Назад", "Далі", "Купити" - перехід за умовою - навігація з коду, а не з шаблону --- ## Як використовувати в Options API? ```js this.$router.push('/users') ``` --- ## Програмна навігація з об'єктом Можна передати об'єкт: ```js this.$router.push({ path: '/users' }) ``` --- ## Навігація за іменем маршруту Використовується найчастіше: ```js this.$router.push({ name: 'user', params: { id: 10 } }) ``` Так надійніше, ніж писати шлях вручну. --- ## Навігація з query-параметрами ```js this.$router.push({ path: '/products', query: { sort: 'price', page: 2 } }) ``` URL стане: ``` /products?sort=price&page=2 ``` --- ## Як використовувати в Composition API? Спочатку import: ```js import { useRouter } from 'vue-router' const router = useRouter() ``` Потім: ```js router.push('/home') ``` або: ```js router.push({ name: 'profile', params: { id: 5 } }) ``` --- ## Що важливо знати для співбесіди? ### 1. push додає запис в історію Після push можна натиснути Back: ``` router.push('/a') router.push('/b') ``` Історія: A -> B -> Back поверне в A. --- ### 2. Є `$router.replace()` Він робить те саме, але **не додає** запис в історію. --- ### 3. Перехід - асинхронний Можна робити: ```js await router.push('/login') ``` --- ### 4. Помилка з params без name Якщо передати params без name: ```js router.push({ params: { id: 10 } }) // помилка ``` Потрібно обов'язково: ```js router.push({ name: 'user', params: { id: 10 } }) ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.