LocationQuery Type Alias | Vue Router

LocationQuery is a type alias that defines the structure for URL query parameters in Vue Router. It provides type-safe access to query string parameters. 🔍

📋 Type Definition

type LocationQuery = Record<
  string, 
  LocationQueryValue | LocationQueryValue[]
>

🎯 Purpose and Usage

The LocationQuery type alias represents query parameters in a standardized format. It supports both single values and arrays, reflecting how query strings work in HTTP URLs.

Key Characteristics:

• ✅ Type Safety - Ensures proper handling of query parameters
• ✅ Array Support - Handles multiple values for same parameter
• ✅ String Values - All values are converted to strings
• ✅ Flexible Structure - Supports complex query scenarios

🔍 Type Structure

Basic Query Structure

// Example: "?name=john&age=30&tags=vue&tags=router"
const query: LocationQuery = {
  name: "john",        // Single value
  age: "30",           // Single value  
  tags: ["vue", "router"] // Array of values
}

Value Patterns

// Single value
{ param: "value" }

// Array of values  
{ param: ["value1", "value2"] }

// No value (parameter present)
{ param: null }

// Mixed types
{
  single: "value",
  multiple: ["v1", "v2"],
  empty: null
}

💡 Practical Usage Examples

Accessing Query Parameters

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

const route = useRoute()

// Basic query access
const searchTerm = computed(() => route.query.q as string | undefined)
const category = computed(() => route.query.category as string | undefined)

// Array parameter handling
const selectedTags = computed(() => {
  const tags = route.query.tags
  return Array.isArray(tags) ? tags : tags ? [tags] : []
})

// Boolean parameters
const isActive = computed(() => route.query.active === 'true')
</script>

Query Parameter Manipulation

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

const route = useRoute()
const router = useRouter()

// Update single parameter
function updateSearch(query: string) {
  router.push({
    query: { ...route.query, q: query || undefined }
  })
}

// Toggle array parameter
function toggleTag(tag: string) {
  const currentTags = Array.isArray(route.query.tags) 
    ? route.query.tags 
    : route.query.tags ? [route.query.tags] : []
  
  const newTags = currentTags.includes(tag)
    ? currentTags.filter(t => t !== tag)
    : [...currentTags, tag]
  
  router.push({
    query: { ...route.query, tags: newTags.length ? newTags : undefined }
  })
}
</script>

🔧 Advanced Patterns

Query Parameter Validation

class QueryValidator {
  validateQuery(query: LocationQuery): ValidationResult {
    const errors: string[] = []
    
    // Validate page parameter
    if (query.page) {
      const page = parseInt(query.page as string, 10)
      if (isNaN(page) || page < 1) {
        errors.push('Invalid page parameter')
      }
    }
    
    // Validate search term length
    if (query.q && (query.q as string).length > 100) {
      errors.push('Search term too long')
    }
    
    return { isValid: errors.length === 0, errors }
  }
}

Query-Based Filtering

class QueryFilterSystem {
  getFiltersFromQuery(query: LocationQuery): ProductFilters {
    return {
      category: this.getStringParam(query, 'category'),
      priceMin: this.getNumberParam(query, 'priceMin'),
      priceMax: this.getNumberParam(query, 'priceMax'),
      inStock: this.getBooleanParam(query, 'inStock'),
      brands: this.getStringArrayParam(query, 'brand')
    }
  }
  
  private getStringParam(query: LocationQuery, key: string): string | undefined {
    const value = query[key]
    return Array.isArray(value) ? value[0] : value || undefined
  }
}

🔗 Related APIs

• parseQuery - Parse query string function
• stringifyQuery - Stringify query object function

💡 Pro Tip: Use LocationQuery for type-safe query parameter handling in your Vue Router applications.