RouteLocationNormalizedLoaded Interface | Vue Router

RouteLocationNormalizedLoaded represents a loaded route location with additional reactive properties. This interface extends RouteLocationNormalized with reactive capabilities for use in Vue components. 🔄

📋 Interface Definition

interface RouteLocationNormalizedLoaded extends RouteLocationNormalized {
  // Reactive properties
  readonly href: string
}

🎯 Purpose and Usage

The RouteLocationNormalizedLoaded interface provides a reactive version of the normalized route location. It's specifically designed for use with Vue's reactivity system, making it ideal for component usage where you need reactive route information.

Key Characteristics:

• ✅ Reactive Properties - All properties are reactive for Vue components
• ✅ Extended Functionality - Builds upon RouteLocationNormalized
• ✅ Component-Ready - Optimized for use in Vue templates and composition functions
• ✅ Type Safety - Full TypeScript support with proper typing

🔍 Property Details

Inherited from RouteLocationNormalized

All properties from RouteLocationNormalized are available and reactive:

• path - Current route path (reactive)
• fullPath - Full path including query and hash (reactive)
• hash - URL hash fragment (reactive)
• query - Query parameters object (reactive)
• params - Route parameters (reactive)
• name - Route name (reactive)
• meta - Route metadata (reactive)
• matched - Matched route records (reactive)
• redirectedFrom - Redirect source if applicable (reactive)

Additional Reactive Property

href - Complete URL

The full URL including protocol, host, and path. This property is reactive and updates when the route changes.

// Example value in component
route.href // "https://example.com/user/123?tab=profile#section"

💡 Practical Usage Examples

Reactive Route Information in Components

<template>
  <div class="route-info">
    <p>Current Path: {{ route.path }}</p>
    <p>Full URL: {{ route.href }}</p>
    <p>Query Parameters: {{ route.query }}</p>
    <p>Route Parameters: {{ route.params }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute() // Returns RouteLocationNormalizedLoaded
</script>

Parameter-Based Reactive Logic

<script setup>
import { useRoute } from 'vue-router'
import { computed, watch } from 'vue'

const route = useRoute()

// Reactive computed properties based on route
const userId = computed(() => route.params.id as string)
const searchQuery = computed(() => route.query.q as string || '')
const pageTitle = computed(() => route.meta.title as string || 'Default')

// Watch for route parameter changes
watch(() => route.params.id, (newId, oldId) => {
  if (newId && newId !== oldId) {
    loadUserData(newId)
  }
})

// Watch query parameter changes
watch(() => route.query.page, (newPage) => {
  if (newPage) {
    loadPageData(parseInt(newPage as string))
  }
})
</script>

Advanced Route-Based Logic

class RouteAwareComponent {
  private route: RouteLocationNormalizedLoaded
  
  constructor(route: RouteLocationNormalizedLoaded) {
    this.route = route
    this.setupRouteWatchers()
  }
  
  private setupRouteWatchers() {
    // Watch for specific route changes
    watch(() => this.route.path, (newPath, oldPath) => {
      this.onRouteChange(newPath, oldPath)
    })
    
    // Watch query parameter changes
    watch(() => this.route.query, (newQuery, oldQuery) => {
      this.onQueryChange(newQuery, oldQuery)
    }, { deep: true })
  }
  
  getCurrentSection(): string {
    return this.route.path.split('/')[1] || 'home'
  }
  
  isRouteActive(pattern: string): boolean {
    return this.route.matched.some(record => 
      record.path.includes(pattern)
    )
  }
  
  getBreadcrumbs(): Breadcrumb[] {
    return this.route.matched.map((record, index) => ({
      title: record.meta?.breadcrumb as string || String(record.name || record.path),
      path: record.path,
      isActive: index === this.route.matched.length - 1
    }))
  }
}

🔧 Advanced Patterns

Route-Based Feature Flags

class RouteFeatureManager {
  constructor(private route: RouteLocationNormalizedLoaded) {}
  
  isFeatureEnabled(feature: string): boolean {
    const routeFeatures = this.route.meta.features as string[] || []
    return routeFeatures.includes(feature)
  }
  
  getEnabledFeatures(): string[] {
    const baseFeatures = ['navigation', 'breadcrumbs']
    const routeFeatures = this.route.meta.features as string[] || []
    return [...baseFeatures, ...routeFeatures]
  }
  
  shouldShowComponent(componentName: string): boolean {
    const hiddenComponents = this.route.meta.hiddenComponents as string[] || []
    return !hiddenComponents.includes(componentName)
  }
}

Dynamic Content Based on Route

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

// Dynamic page configuration based on route
const pageConfig = computed(() => ({
  title: route.meta.title as string || 'Default Title',
  layout: route.meta.layout as string || 'default',
  sidebar: route.meta.showSidebar !== false,
  backgroundColor: route.meta.backgroundColor as string || '#ffffff'
}))

// Dynamic navigation items
const navigationItems = computed(() => {
  const baseItems = [
    { path: '/', label: 'Home' },
    { path: '/about', label: 'About' }
  ]
  
  // Add route-specific items
  if (route.meta.extraNavItems) {
    return [...baseItems, ...route.meta.extraNavItems]
  }
  
  return baseItems
})
</script>

🔗 Related APIs

• RouteLocationNormalized - Base normalized route interface
• useRoute() - Hook to access current route
• Router Navigation - Programmatic navigation methods

💡 Pro Tip: Use RouteLocationNormalizedLoaded in components for reactive route information. For programmatic navigation or route analysis, use RouteLocationNormalized instead.