Suggest an edit

Improve this article

Refine the answer for “Routing and navigation”. 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)

## 1. What is routing in Vue.js

**Routing** is a mechanism that allows building a **SPA (Single Page Application)**,
in which transitions between pages happen **without reloading the browser**.

In Vue, routing is handled by the **official library** `vue-router`.

---

## 2. Installing Vue Router

If your project was created with Vite, simply install the package:

```javascript
npm install vue-router
```

---

## 3. Basic router setup

Create the file `src/router/index.js` (or `.ts`):

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/pages/HomePage.vue'
import AboutPage from '@/pages/AboutPage.vue'

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage }
]

const router = createRouter({
  history: createWebHistory(), // HTML5 history API mode
  routes
})

export default router
```

---

## 4. Connecting the router to the application

In `main.js` (the entry point):

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

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

Now `router` is available throughout the application.

---

## 5. Displaying the active route - `<router-view>`

In `App.vue`, insert:

```javascript
<template>
  <Header />
  <router-view /> 
  <Footer />
</template>
```

`<router-view>` is a **dynamic slot** where Vue Router inserts the component
that matches the current route.

---

## 6. Navigation between pages

There are **two ways** to navigate:

### Through the `<router-link>` component

```javascript
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>
```

This is an analog of `<a>`, but without a page reload.

---

### Programmatic navigation (via JS)

```javascript
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function goToAbout() {
  router.push('/about')
}
</script>

<template>
  <button @click="goToAbout">Go to the "About" page</button>
</template>
```

---

## 7. Dynamic routes (with parameters)

You can pass **dynamic parameters** via `:id`:

```javascript
const routes = [
  { path: '/users/:id', component: UserPage }
]
```

### Accessing the parameters:

```javascript
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id) // the :id value from the URL
</script>
```

Example: `/users/42` -> `route.params.id === '42'`

---

## 8. Navigating with parameters and query passed

```javascript
router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})
```

The URL will be: `/users/42?tab=profile`

---

## 9. Nested routes

You can build a **page hierarchy** - a layout plus nested views.

```javascript
{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    { path: '', component: DashboardHome },
    { path: 'settings', component: DashboardSettings }
  ]
}
```

In `DashboardLayout.vue`:

```javascript
<template>
  <Sidebar />
  <router-view /> 
</template>
```

---

## 10. Protected routes (Navigation Guards)

You can control access to routes (for example, require authentication):

```javascript
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})
```

You can set meta on routes:

```javascript
{ path: '/profile', component: ProfilePage, meta: { requiresAuth: true } }
```

---

## 11. Working with active links

`<router-link>` automatically adds the CSS class `router-link-active` for the current route.
You can customize it:

```javascript
<router-link to="/" active-class="active-link">Home</router-link>
```

---

## 12. History and modes

Vue Router supports 2 modes:

| Mode | Description |
|---|---|
| `createWebHistory()` | Uses the HTML5 History API (clean URLs without `#`) |
| `createWebHashHistory()` | Uses hashes (`/#/about`), convenient for static hosting |

---

## Summary

> **Routing in Vue.js** is implemented via `vue-router` and allows you to:
>
> - Navigate between components without reloading the page,
> - Use dynamic and nested routes,
> - Add guards (checks, redirects),
> - Build layout components and an SPA structure.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.