RouterView | Vue Router - The Heart of Your Application ❤️

Dynamic component rendering - Where your route components come to life!

🎯 Component Overview

RouterView is the core component that renders the appropriate Vue component based on the current route. It acts as the placeholder where your route components are dynamically loaded and displayed, making it the central piece of any Vue Router application.

📋 Basic Usage

<template>
  <div id="app">
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
    
    <main>
      <RouterView />
    </main>
  </div>
</template>

🔧 Component Signature

const RouterView: () => object

💡 Why RouterView is Essential

🎯 Dynamic Content Rendering

RouterView enables single-page application behavior by:

• Loading Components Dynamically: Renders the correct component based on current URL
• Maintaining State: Preserves component state during navigation
• Supporting Transitions: Works seamlessly with Vue's transition system
• Enabling Nested Routes: Handles complex routing hierarchies

🏗️ Application Structure

<template>
  <div class="app-layout">
    <!-- Header (always visible) -->
    <header class="app-header">
      <AppNavigation />
    </header>
    
    <!-- Main content area (dynamic) -->
    <main class="app-main">
      <RouterView />
    </main>
    
    <!-- Footer (always visible) -->
    <footer class="app-footer">
      <AppFooter />
    </footer>
  </div>
</template>

🛠️ Practical Examples

Example 1: Basic Application Setup

<template>
  <div id="app">
    <!-- Global navigation -->
    <nav class="global-nav">
      <RouterLink to="/" class="nav-item">Home</RouterLink>
      <RouterLink to="/products" class="nav-item">Products</RouterLink>
      <RouterLink to="/about" class="nav-item">About</RouterLink>
    </nav>
    
    <!-- Main content area -->
    <div class="content-area">
      <RouterView />
    </div>
    
    <!-- Global footer -->
    <footer class="global-footer">
      <p>&copy; 2024 My App. All rights reserved.</p>
    </footer>
  </div>
</template>

<script setup>
import { RouterView, RouterLink } from 'vue-router'
</script>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.global-nav {
  background: #2c3e50;
  padding: 1rem;
  display: flex;
  gap: 2rem;
}

.nav-item {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.nav-item:hover {
  background: #34495e;
}

.content-area {
  flex: 1;
  padding: 2rem;
}

.global-footer {
  background: #34495e;
  color: white;
  text-align: center;
  padding: 1rem;
}
</style>

Example 2: Advanced Slot Usage

<template>
  <RouterView v-slot="{ Component, route }">
    <!-- Transition between routes -->
    <Transition 
      name="page-slide" 
      mode="out-in"
    >
      <!-- Keep components alive for better UX -->
      <KeepAlive :include="cachedComponents">
        <component 
          :is="Component" 
          :key="route.fullPath"
        />
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

<script setup>
import { ref, computed } from 'vue'

// Define which components should be kept alive
const cachedComponents = ref(['HomePage', 'ProductList', 'UserProfile'])

// Alternative: dynamic caching based on route meta
const shouldCache = computed(() => {
  return route.meta.keepAlive !== false
})
</script>

<style>
.page-slide-enter-active,
.page-slide-leave-active {
  transition: all 0.3s ease;
}

.page-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.page-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style>

🔧 Slot API

🎨 Complete Control with v-slot

The v-slot API provides access to the current component and route:

<template>
  <RouterView v-slot="{ Component, route }">
    <div class="route-container">
      <!-- Custom loading state -->
      <div v-if="!Component" class="loading-state">
        <LoadingSpinner />
      </div>
      
      <!-- Render component when ready -->
      <component
        v-else
        :is="Component"
        :key="route.fullPath"
        class="route-component"
      />
    </div>
  </RouterView>
</template>

📊 Slot Properties

Property	Type	Description
Component	Component	The Vue component to render
route	RouteLocationNormalizedLoaded	Current route information

🎯 Best Practices

✅ Do Use When

• Building single-page applications
• Need dynamic component rendering
• Implementing nested routes
• Working with route transitions

❌ Avoid When

• Static content (use regular components)
• Simple applications without routing needs
• Performance-critical static layouts

📚 Related Components

• RouterLink - Navigation component
• useRoute() - Access current route information
• useRouter() - Access router instance

---

💡 Pro Tip

Combine RouterView with Vue's KeepAlive component to preserve component state during navigation for better user experience!

Ready to build dynamic applications? Start using RouterView as the heart of your Vue Router application! ❤️