NavigationFailureType | Vue Router

NavigationFailureType is an enumeration that defines all possible types for navigation failures in Vue Router. This enum can be passed to isNavigationFailure() to check for specific failure types. 🚨

📋 Enum Definition

enum NavigationFailureType {
  aborted = 4,
  cancelled = 8,
  duplicated = 16
}

🔍 Enumeration Members

aborted - Navigation Aborted

Value: 4

An aborted navigation occurs when a navigation guard returns false or calls next(false), effectively preventing the navigation from completing.

Example Scenario:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next(false) // This creates an aborted navigation
  } else {
    next()
  }
})

cancelled - Navigation Cancelled

Value: 8

A cancelled navigation happens when a more recent navigation starts (but doesn't necessarily finish) while the current navigation is still in progress.

Example Scenario:

// User clicks link A, then quickly clicks link B before A completes
await router.push('/page-a') // Navigation starts
await router.push('/page-b') // This cancels the previous navigation

duplicated - Duplicated Navigation

Value: 16

A duplicated navigation fails because it was initiated while already being at the exact same location.

Example Scenario:

// Already at /current-page
router.push('/current-page') // This creates a duplicated navigation failure

💡 Practical Usage

Detecting Specific Failure Types

import { isNavigationFailure, NavigationFailureType } from 'vue-router'

router.push('/target').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
    console.log('Navigation was aborted by a guard')
    showErrorMessage('Access denied: authentication required')
  }
  
  if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
    console.log('Already at the target location')
    // Often safe to ignore this type of failure
  }
})

Generic Navigation Failure Check

router.push('/some-path').catch(failure => {
  if (isNavigationFailure(failure)) {
    // Handle any type of navigation failure
    logNavigationError(failure)
  }
})

Advanced Failure Handling

function handleNavigationError(failure) {
  if (isNavigationFailure(failure)) {
    switch (failure.type) {
      case NavigationFailureType.aborted:
        // Show user-friendly message
        showToast('Navigation was blocked. Please check your permissions.')
        break
      case NavigationFailureType.cancelled:
        // Often happens during rapid navigation, can be ignored
        console.log('Navigation cancelled by subsequent navigation')
        break
      case NavigationFailureType.duplicated:
        // User tried to navigate to current location
        showToast('You are already on this page')
        break
    }
  } else {
    // Handle non-navigation errors
    console.error('Unexpected error:', failure)
  }
}

🎯 Best Practices

1. Graceful Error Handling

// Instead of letting errors bubble up
try {
  await router.push('/protected-page')
} catch (error) {
  if (isNavigationFailure(error, NavigationFailureType.aborted)) {
    // Redirect to login or show appropriate message
    router.push('/login')
  } else {
    // Handle other errors
    throw error
  }
}

2. User Experience Considerations

router.push('/target').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
    // Don't show error for duplicated navigation - it's often user error
    return
  }
  
  // For other failures, provide helpful feedback
  showNavigationError(failure)
})

3. Development Debugging

// Add detailed logging during development
if (process.env.NODE_ENV === 'development') {
  router.onError((error) => {
    if (isNavigationFailure(error)) {
      console.group('Navigation Failure Details')
      console.log('Type:', error.type)
      console.log('From:', error.from)
      console.log('To:', error.to)
      console.groupEnd()
    }
  })
}

🔗 Related APIs

• isNavigationFailure() - Function to check if an error is a navigation failure
• Navigation Guards - Where most navigation failures originate
• Error Handling - General error handling patterns in Vue Router

📚 Additional Resources

Common Failure Scenarios

1. Authentication Guards - Most common source of aborted failures
2. Rapid Navigation - User clicking multiple links quickly causes cancelled failures
3. Current Location Navigation - Programmatic navigation to current location causes duplicated failures

Debugging Tips

• Use Vue DevTools to inspect navigation state
• Add navigation guards logging for complex scenarios
• Test navigation failures in your application's test suite

💡 Pro Tip: Most duplicated navigation failures can be safely ignored in production, as they typically represent user attempts to navigate to their current location.