Що таке $router.push?

VueJunior~1 хв читання

$router.push - це метод Vue Router, який дозволяє програмно перейти на інший маршрут (іншу "сторінку" в SPA) без перезавантаження сторінки.

Простіше кажучи:

$router.push() - це спосіб навігації через JavaScript, а не через <router-link>.

Де використовується?

this.$router.push('/users')

Можна передати об'єкт:

this.$router.push({ path: '/users' })

Використовується найчастіше:

this.$router.push({ name: 'user', params: { id: 10 } })

Так надійніше, ніж писати шлях вручну.

this.$router.push({
  path: '/products',
  query: { sort: 'price', page: 2 }
})

URL стане:

/products?sort=price&page=2

Спочатку import:

import { useRouter } from 'vue-router'

const router = useRouter()

Потім:

router.push('/home')

або:

router.push({ name: 'profile', params: { id: 5 } })

Після push можна натиснути Back:

router.push('/a')
router.push('/b')

Історія: A -> B -> Back поверне в A.

Він робить те саме, але не додає запис в історію.

Можна робити:

await router.push('/login')

Якщо передати params без name:

router.push({ params: { id: 10 } }) // помилка

Потрібно обов'язково:

router.push({ name: 'user', params: { id: 10 } })

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.