Vue Router Navigation Guards Explained

Navigation guards allow you to control navigation in your Vue application. Let’s explore all types of guards.

Global Guards

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { name: 'login' }
  }
})

router.afterEach((to, from) => {
  sendAnalytics(to.fullPath)
})

Per-Route Guards

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from) => {
      if (!hasPermission()) {
        return '/unauthorized'
      }
    }
  }
]

In-Component Guards

vue

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return confirm('Discard changes?')
  }
})

onBeforeRouteUpdate((to, from) => {
  // Fetch new data when route params change
  fetchData(to.params.id)
})
</script>

Route Meta Fields

{
  path: '/admin',
  meta: { requiresAuth: true, roles: ['admin'] },
  component: AdminPanel
}

Navigation Resolution Flow

beforeRouteLeave (component)
beforeEach (global)
beforeEnter (route)
beforeRouteEnter (component)
afterEach (global)