Suggest an edit

Improve this article

Refine the answer for “What is the router used for in an SPA?”. 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)

The router in an SPA (Single Page Application) is needed to **manage navigation between "pages" without reloading the browser**.
It makes SPAs look like regular multi-page sites, but **without losing speed and smoothness**.

In simpler terms:

> **The router lets you change the URL → display the right component → but the page does not physically reload.**

---

## What exactly is the router used for in an SPA?

### 1. Navigation without a page reload

A regular site:
Every transition = loading a new HTML page.

An SPA:
The router just swaps the component inside `<router-view>`.

- Faster
- Smoother
- No unnecessary requests

---

### 2. Displaying different components for different URLs

For example:

- `/` → the Home component
- `/users` → the Users component
- `/users/10` → the UserInfo component

That is, the router connects a **path to a component**.

---

### 3. Working with browser history

An SPA still supports:

- back/forward buttons
- direct navigation by URL
- bookmarks

The router manages:

- `window.history`
- `pushState`
- `replaceState`

---

### 4. Passing parameters into pages

For example:

```
/products/15
```

The router gives you:

```js
route.params.id === "15"
```

---

### 5. Access control (guards)

You can restrict access to routes:

- only to authenticated users
- only to admins
- only if the data has loaded

Example:

```js
router.beforeEach((to, from, next) => {
  if (!isLoggedIn) next('/login')
  else next()
})
```

---

### 6. Dynamic navigation from code

You can switch "pages" not only through `<router-link>`, but also programmatically:

```js
router.push('/dashboard')
```

---

### 7. Lazy-loading pages (optimization)

The router can load a component only when it is needed:

```js
component: () => import('../pages/Home.vue')
```

This reduces the application's size on first load.

---

### Summary (great for interviews)

> **The router in an SPA is used to manage navigation without reloading the page.**
> **It lets you display different components for different URLs, work with history, pass parameters, protect routes, change pages programmatically, and perform lazy-loading.**
> **Thanks to the router, an SPA works like a regular site, but faster and smoother.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.