Suggest an edit

Improve this article

Refine the answer for “What is Vue Router?”. 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)

**Vue Router** is the **official router** for Vue.js, which lets you create multi-page behavior inside a single-page application (SPA).

In other words:

> **Vue Router manages transitions between pages/screens inside a Vue application without reloading the page.**

This is what makes your Vue application a true SPA.

---

## What does Vue Router do?

#### 1. Manages the URL in the browser

For example:

```
/home
/users
/users/10
/products?sort=price
```

#### 2. Links URLs to components

For example:

```js
{
  path: '/users',
  component: UsersPage
}
```

#### 3. Lets you build navigation

Via `<router-link>`:

```html
<router-link to="/users">Users</router-link>
```

#### 4. Changes views without reloading

It substitutes components into `<router-view>`:

```html
<router-view />
```

#### 5. Manages history (the history API)

You can use:

- history mode (clean URLs)
- hash mode (`/#/users`)

#### 6. Supports nested routes

For example:

```
/users
/users/10
/users/10/profile
```

#### 7. Passes parameters

For example:

```
/users/:id
```

---

## A minimal Vue Router example

#### router/index.js:

```js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

export const router = createRouter({
  history: createWebHistory(),
  routes
})
```

#### main.js:

```js
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App).use(router).mount('#app')
```

#### App.vue:

```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

<router-view />
```

---

## Vue Router capabilities

#### Navigation

- `router.push('/users')`
- `router.replace()`
- `router.back()`

#### Dynamic routes

- `/users/:id`

#### Getting parameters

```js
const route = useRoute()
console.log(route.params.id)
```

#### Route guards

- beforeEnter
- beforeEach
- beforeRouteLeave

Used for authorization, access checks, and so on.

#### Programmatic navigation

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

#### Lazy-loading components

Routes are loaded on demand.

---

## Summary (ideal for an interview)

> **Vue Router is Vue's official router, which manages navigation, URLs, history, parameters, and page rendering in an SPA.**
> **It links a path to a component, and supports nested routes, guards, transitions, lazy-loading, and programmatic navigation.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.