Skip to main content

What is $router.push?

VueJunior~1 min read
Suggest an edit

$router.push is a Vue Router method that lets you programmatically navigate to a different route (another "page" in an SPA) without reloading the page.

In simple terms:

$router.push() is a way to navigate via JavaScript instead of <router-link>.

Where is it used?

  • navigating to a page after a user action
  • redirecting after login
  • "Back", "Next", "Buy" buttons
  • conditional navigation
  • navigation from code rather than the template

How to use it in the Options API?

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

Programmatic navigation with an object

You can pass an object:

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

Navigation by route name

The most common way:

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

This is more reliable than writing the path by hand.

Navigation with query parameters

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

The URL becomes:

/products?sort=price&page=2

How to use it in the Composition API?

First import:

js
import { useRouter } from 'vue-router' const router = useRouter()

Then:

js
router.push('/home')

or:

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

What's important to know for an interview?

1. push adds an entry to the history

After push you can press Back:

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

History: A -> B -> Back returns to A.

2. There is $router.replace()

It does the same thing but does not add an entry to the history.

3. Navigation is asynchronous

You can do:

js
await router.push('/login')

4. Error with params without name

If you pass params without name:

js
router.push({ params: { id: 10 } }) // error

You must include:

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

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit