Suggest an edit

Improve this article

Refine the answer for “What is a navigation guard?”. 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)

A **navigation guard** is a Vue Router mechanism that lets you **intercept transitions between routes** and **run logic before, during, or after navigation**.

In simpler terms:

> **A navigation guard is a "gatekeeper" that decides whether navigation to a route is allowed, whether it needs to redirect, or whether to cancel the transition.**

It's used for:

- authorization
- permission checks
- loading data
- confirmations ("Are you sure you want to leave?")
- logging
- redirects

---

## Types of navigation guards

Vue Router has **3 levels** of guards.

---

## 1. **Global Guards**

Trigger on every navigation.

#### `router.beforeEach`

The main guard for checks:

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

#### `router.beforeResolve`

Triggers **after** beforeEach, right before the navigation is resolved.

#### `router.afterEach`

Triggers after navigation (side effects: analytics, logging):

```js
router.afterEach((to, from) => {
  console.log('Navigated to', to.fullPath)
})
```

---

## 2. **Route-level Guards**

Added directly on the route object:

```js
const routes = [
  {
    path: '/admin',
    component: AdminPage,
    beforeEnter(to, from, next) {
      if (!isAdmin) next('/not-authorized')
      else next()
    }
  }
]
```

Used for logic that relates **to a specific route**.

---

## 3. **In-component Guards**

#### `beforeRouteEnter`

```js
beforeRouteEnter(to, from, next) {
  next(vm => {
    // access to vm, the component instance
  })
}
```

#### `beforeRouteUpdate`

Triggers when the route is updated but the component is reused
(for example `/users/1` → `/users/2`):

```js
beforeRouteUpdate(to, from, next) {
  this.fetchUser()
  next()
}
```

#### `beforeRouteLeave`

Triggers when leaving the page:

```js
beforeRouteLeave(to, from, next) {
  if (this.isDirty) {
    const answer = confirm("Leave without saving?")
    answer ? next() : next(false)
  } else {
    next()
  }
}
```

---

## When should you use navigation guards?

### Checking authorization:

```js
if (!isLoggedIn) next('/login')
```

### Checking access rights:

```js
if (!user.isAdmin) next('/403')
```

### Preloading data (SSR or large pages)

### Preventing leaving a page:

For example, unsaved changes.

### Redirecting:

```js
next({ name: 'home' })
```

---

## What's important to know for an interview

#### 1) Guards must call `next()` (except `afterEach`)

Otherwise the navigation hangs.

#### 2) In Vue Router 4 (`Vue 3`), `next()` often does not need to be used

You can return:

- `true` - allow
- `false` - cancel
- `{ name: 'route' }` - redirect
- `undefined` - also allow

Example:

```js
router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn) {
    return { name: 'login' }
  }
})
```

#### 3) Global guards apply to all routes

Component guards apply only to one.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.