viewDepthKey | Vue Router - Advanced Router View Control 🔧

Fine-grained view management - Control which nested component gets rendered in complex routing scenarios!

🎯 Variable Overview

viewDepthKey is an advanced injection key that allows you to override the router view depth, giving you precise control over which component in the matched route hierarchy gets rendered. This is particularly useful for complex nested routing scenarios.

📋 Basic Usage

const viewDepthKey: InjectionKey<number | Ref<number, number>>

💡 When to Use viewDepthKey

🎯 Complex Nested Routing

Use viewDepthKey when you need to:

• Override Default Behavior: Control which nested component renders
• Dynamic View Selection: Change rendered components based on application state
• Advanced Layout Management: Implement complex multi-level layouts

🔧 Technical Implementation

import { viewDepthKey } from 'vue-router'

// Provide a custom view depth
provide(viewDepthKey, 2) // Render the component at depth 2

🛠️ Practical Examples

Example 1: Basic Depth Control

<template>
  <div class="app-container">
    <!-- Default RouterView behavior -->
    <RouterView />
    
    <!-- Custom depth RouterView -->
    <RouterView :depth="customDepth" />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import { viewDepthKey } from 'vue-router'

const customDepth = ref(2)

// Override view depth for this component tree
provide(viewDepthKey, customDepth)
</script>

Example 2: Dynamic View Switching

<template>
  <div class="multi-level-app">
    <!-- Navigation controls -->
    <div class="depth-controls">
      <button @click="decreaseDepth">⬅️ Previous Level</button>
      <span>Current Depth: {{ currentDepth }}</span>
      <button @click="increaseDepth">Next Level ➡️</button>
    </div>
    
    <!-- RouterView with dynamic depth -->
    <RouterView />
  </div>
</template>

<script setup>
import { ref, computed, provide } from 'vue'
import { viewDepthKey, useRoute } from 'vue-router'

const route = useRoute()
const currentDepth = ref(0)

// Calculate maximum available depth
const maxDepth = computed(() => {
  return route.matched.length - 1
})

function increaseDepth() {
  if (currentDepth.value < maxDepth.value) {
    currentDepth.value++
  }
}

function decreaseDepth() {
  if (currentDepth.value > 0) {
    currentDepth.value--
  }
}

// Provide dynamic depth control
provide(viewDepthKey, currentDepth)
</script>

<style scoped>
.depth-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

button {
  padding: 0.5rem 1rem;
  border: 1px solid #007bff;
  background: white;
  color: #007bff;
  border-radius: 4px;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: #007bff;
  color: white;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

🔍 Technical Details

🔄 How View Depth Works

Vue Router uses view depth to determine which component to render in nested routing scenarios:

Route: /users/123/posts/456/comments

Matched Components:
- Depth 0: UserLayout
- Depth 1: UserProfile
- Depth 2: UserPosts  
- Depth 3: PostComments

By default, RouterView renders the component at the current depth.
viewDepthKey allows you to override this behavior.

⚡ Injection Key Type

// The injection key accepts numbers or reactive references
type ViewDepth = number | Ref<number>

// Usage examples
provide(viewDepthKey, 2)                    // Static depth
provide(viewDepthKey, ref(2))               // Reactive depth
provide(viewDepthKey, computed(() => ...))  // Computed depth

🎯 Advanced Usage Patterns

Pattern 1: Conditional Rendering

import { viewDepthKey, useRoute } from 'vue-router'
import { computed, provide } from 'vue'

const route = useRoute()

// Only show specific depths based on route parameters
const dynamicDepth = computed(() => {
  if (route.params.showDetails) {
    return 2 // Show detailed view
  }
  return 1 // Show summary view
})

provide(viewDepthKey, dynamicDepth)

Pattern 2: Multi-level Navigation

<template>
  <div class="wizard-container">
    <!-- Progress indicator -->
    <div class="wizard-progress">
      <div 
        v-for="step in totalSteps" 
        :key="step"
        class="progress-step"
        :class="{ active: currentStep >= step }"
        @click="goToStep(step)"
      >
        Step {{ step }}
      </div>
    </div>
    
    <!-- Dynamic RouterView -->
    <RouterView />
  </div>
</template>

<script setup>
import { ref, provide, computed } from 'vue'
import { viewDepthKey } from 'vue-router'

const currentStep = ref(1)
const totalSteps = 4

// Use step as view depth
provide(viewDepthKey, currentStep)

function goToStep(step) {
  if (step <= totalSteps) {
    currentStep.value = step
  }
}
</script>

🚀 Performance Considerations

⚡ Optimized Re-rendering

// Use computed properties for optimal performance
const optimizedDepth = computed(() => {
  // Only recalculate when dependencies change
  return someCondition ? 2 : 1
})

provide(viewDepthKey, optimizedDepth)

🔄 Memory Management

import { onUnmounted } from 'vue'

// Clean up when component unmounts
onUnmounted(() => {
  // Reset to default behavior if needed
  provide(viewDepthKey, undefined)
})

📚 Related APIs

• RouterView - The component that uses view depth
• matchedRouteKey - Key for accessing the current route record
• routeLocationKey - Key for accessing the current route location

🔧 Integration Examples

With Vuex/Pinia

import { useStore } from 'vuex'
import { viewDepthKey } from 'vue-router'
import { computed } from 'vue'

const store = useStore()

// Use store state to control view depth
const viewDepth = computed(() => store.state.ui.viewDepth)

provide(viewDepthKey, viewDepth)

With TypeScript

import { viewDepthKey } from 'vue-router'
import { Ref, inject } from 'vue'

// Type-safe injection
const depth = inject<Ref<number>>(viewDepthKey)

if (depth) {
  depth.value = 2 // Safe assignment
}

---

💡 Pro Tip

Use viewDepthKey in combination with route meta fields to create intelligent view switching based on user permissions or application state!

Ready for advanced routing control? Start using viewDepthKey to master complex nested routing scenarios! 🔧