Suggest an edit

Improve this article

Refine the answer for “What is $router.push?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`$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 } })
```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts310 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.