NavigationFailure Interface | Vue Router

NavigationFailure represents a failed navigation attempt in Vue Router. This interface provides detailed information about why a navigation failed, allowing you to handle different types of navigation errors appropriately.

📋 Interface Definition

interface NavigationFailure {
  type: NavigationFailureType
  from: RouteLocationNormalized
  to: RouteLocationNormalized
}

🔧 Properties

type

• Type: NavigationFailureType
• Description: The specific type of navigation failure that occurred

from

• Type: RouteLocationNormalized
• Description: The route location the navigation was coming from
• Related: RouteLocationNormalized

to

• Type: RouteLocationNormalized
• Description: The route location the navigation was going to
• Related: RouteLocationNormalized

💡 Usage Examples

Handling Navigation Failures

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

router.afterEach((to, from, failure) => {
  if (failure) {
    console.log('Navigation failed:', failure.type)
    console.log('From:', failure.from.path)
    console.log('To:', failure.to.path)
    
    if (failure.type === NavigationFailureType.aborted) {
      console.log('Navigation was aborted by a guard')
    } else if (failure.type === NavigationFailureType.cancelled) {
      console.log('Navigation was cancelled')
    } else if (failure.type === NavigationFailureType.duplicated) {
      console.log('Navigation to the same location was attempted')
    }
  }
})

Programmatic Error Handling

router.push('/some-route').catch((error) => {
  if (isNavigationFailure(error)) {
    switch (error.type) {
      case NavigationFailureType.aborted:
        // Handle guard abortion
        showError('Navigation was blocked by a guard')
        break
      case NavigationFailureType.cancelled:
        // Handle cancellation
        showError('Navigation was cancelled')
        break
      case NavigationFailureType.duplicated:
        // Handle duplicate navigation
        console.log('Already at the destination')
        break
    }
  }
})

🎯 Common Failure Types

NavigationFailureType.aborted

• Cause: Navigation was aborted by a navigation guard
• Common Scenarios:
  • beforeEach guard calls next(false)
  • Route requires authentication but user is not logged in
  • Route requires specific permissions that user doesn't have

NavigationFailureType.cancelled

• Cause: A new navigation took over while the current one was in progress
• Common Scenarios:
  • User clicks multiple navigation links quickly
  • Programmatic navigation calls overlap

NavigationFailureType.duplicated

• Cause: Navigation to the same location was attempted
• Common Scenarios:
  • User clicks the same navigation link twice
  • Programmatic navigation to current location

📝 Best Practices

1. Always Check for Failures - Use isNavigationFailure() to distinguish navigation failures from other errors
2. Provide User Feedback - Inform users when navigation fails and why
3. Implement Fallbacks - Provide alternative navigation options when primary navigation fails
4. Log for Debugging - Log navigation failures for debugging and analytics- Related: RouteLocationNormalized

🔗 Related APIs

• router.afterEach() - Global hook that receives navigation failures
• RouteLocationNormalized - Interface for normalized route locations