Vue Academy · Lesson

Navigation Guards

Protect routes and run logic on navigation with guards.

Lesson 3 of 313 steps

Navigation Guards is a free Vue Academy lesson on CoddyKit. This is lesson 3 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 3 lessons in total.

What Are Navigation Guards?

Navigation guards let you run code before, during, or after a route change.

Block or redirect navigation
Check authentication
Confirm before leaving a page

Types of Guards

There are three levels of guards:

Global guards run for every navigation
Per-route guards run for one specific route
In-component guards run inside a component

The beforeEach Global Guard

router.beforeEach runs before every navigation. It receives the target and current routes.

router.beforeEach((to, from) => {
  console.log("going to", to.path)
  // return true to allow,
  // or a route to redirect
})

Allowing or Redirecting

In Vue Router 4, return a value to control the flow.

Return true or nothing to allow
Return false to cancel
Return a route location to redirect

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

Route Meta Fields

Attach custom meta data to routes, like requiresAuth, and read it in guards.

const routes = [
  {
    path: "/dashboard",
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

An Authentication Guard

A common pattern: protect routes by checking auth in a global guard.

router.beforeEach((to) => {
  const authed = localStorage.getItem("token")
  if (to.meta.requiresAuth && !authed) {
    return { name: "login", query: { redirect: to.fullPath } }
  }
})

Per-Route beforeEnter

beforeEnter guards a single route directly in its definition.

const routes = [
  {
    path: "/admin",
    component: Admin,
    beforeEnter: (to, from) => {
      return isAdmin() ? true : { name: "home" }
    }
  }
]

In-Component Guards

Components can define their own guards. onBeforeRouteLeave runs when navigating away.

import { onBeforeRouteLeave } from "vue-router"

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return window.confirm("Leave without saving?")
  }
})

onBeforeRouteUpdate

onBeforeRouteUpdate runs when the route changes but the same component is reused (param change).

import { onBeforeRouteUpdate } from "vue-router"

onBeforeRouteUpdate((to) => {
  loadUser(to.params.id)
})

The next Callback (Classic Style)

Older code uses a third argument, next, to control navigation. Returning a value is now preferred.

// Classic style with next()
router.beforeEach((to, from, next) => {
  if (canAccess(to)) {
    next()         // proceed
  } else {
    next("/login") // redirect
  }
})

Return Value vs next()

Two styles, same goal:

Return a value (modern, cleaner) true, false, or a location
Call next() (classic) proceed or redirect

Do not mix them in the same guard. The return style is recommended for new code.

Quick Check

Test your understanding of navigation guards.

Answer it in the interactive lesson

Recap: Navigation Guards

You learned to control navigation:

beforeEach global guard runs for every route
Return true to allow, false to cancel, or a location to redirect
meta fields like requiresAuth drive auth checks
beforeEnter guards a single route
In-component guards like onBeforeRouteLeave handle leaving

You have completed the foundational Vue.js course!

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “Navigation Guards” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Navigation Guards”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 3 lessons in total.

What will I learn in “Navigation Guards”?

Protect routes and run logic on navigation with guards. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 3.

How long does the “Navigation Guards” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy