RouterLink | Vue Router - The Smart Navigation Component 🧭

Declarative navigation made easy - Create links that understand your application's routing structure!

🎯 Component Overview

RouterLink is Vue Router's declarative navigation component that provides intelligent link behavior for single-page applications. It replaces traditional <a> tags with a component that understands your routing configuration and provides enhanced functionality.

📋 Basic Usage

<template>
  <RouterLink to="/home">Home</RouterLink>
  <RouterLink :to="{ name: 'user', params: { id: 123 } }">User Profile</RouterLink>
</template>

🔧 Component Signature

const RouterLink: _RouterLinkI

💡 Why Use RouterLink?

🚀 Smart Navigation

RouterLink provides several advantages over traditional anchor tags:

• No Page Reloads: Navigates without full page refreshes
• Active State Management: Automatically applies CSS classes for active links
• Programmatic Control: Full access to Vue Router's navigation capabilities
• Type Safety: TypeScript support for route names and parameters

🎨 Enhanced User Experience

<template>
  <nav>
    <RouterLink 
      to="/home" 
      active-class="active-link"
      exact-active-class="exact-active-link"
    >
      Home
    </RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/contact">Contact</RouterLink>
  </nav>
</template>

<style>
.active-link {
  color: #007bff;
  font-weight: bold;
}

.exact-active-link {
  border-bottom: 2px solid #007bff;
}
</style>

🛠️ Practical Examples

Example 1: Basic Navigation

<template>
  <div class="navigation">
    <RouterLink to="/" class="nav-link">Home</RouterLink>
    <RouterLink to="/products" class="nav-link">Products</RouterLink>
    <RouterLink to="/about" class="nav-link">About Us</RouterLink>
    <RouterLink to="/contact" class="nav-link">Contact</RouterLink>
  </div>
</template>

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

<style scoped>
.navigation {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
}

.nav-link {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background: #007bff;
  color: white;
}

.nav-link.router-link-active {
  background: #0056b3;
  color: white;
}
</style>

Example 2: Advanced Route Configuration

<template>
  <div>
    <!-- Using route name with parameters -->
    <RouterLink 
      :to="{ 
        name: 'user-profile', 
        params: { userId: currentUser.id },
        query: { tab: 'settings' }
      }"
    >
      Edit Profile
    </RouterLink>

    <!-- External links with proper attributes -->
    <RouterLink 
      to="https://external-site.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      External Site
    </RouterLink>

    <!-- Replace navigation (no history entry) -->
    <RouterLink 
      to="/login" 
      replace
    >
      Login (Replace)
    </RouterLink>
  </div>
</template>

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

const currentUser = computed(() => ({
  id: 123,
  name: 'John Doe'
}))
</script>

🔧 Props Configuration

📊 Complete Props List

Prop	Type	Default	Description
to	string | Location	-	Required - Target route location
replace	boolean	false	Replace current history entry
custom	boolean	false	Custom rendering with v-slot
activeClass	string	'router-link-active'	CSS class for active links
exactActiveClass	string	'router-link-exact-active'	CSS class for exact active links
ariaCurrentValue	string	'page'	ARIA current value for accessibility

🎯 Advanced Prop Usage

<template>
  <!-- Custom active classes -->
  <RouterLink
    to="/dashboard"
    active-class="bg-blue-100 text-blue-800"
    exact-active-class="border-l-4 border-blue-500"
  >
    Dashboard
  </RouterLink>

  <!-- Replace navigation (no back button) -->
  <RouterLink
    to="/welcome"
    replace
  >
    Get Started
  </RouterLink>

  <!-- Custom v-slot rendering -->
  <RouterLink
    to="/profile"
    custom
    v-slot="{ href, navigate, isActive }"
  >
    <button
      :href="href"
      @click="navigate"
      :class="{ active: isActive }"
    >
      Profile
    </button>
  </RouterLink>
</template>

🔍 Slot API

🎨 Custom Rendering

Use the v-slot API for complete control over rendering:

<template>
  <RouterLink
    to="/advanced"
    custom
    v-slot="{ href, route, navigate, isActive, isExactActive }"
  >
    <div
      class="custom-link"
      :class="{ 
        active: isActive, 
        'exact-active': isExactActive 
      }"
      @click="navigate"
    >
      <span class="link-icon">🔗</span>
      <span class="link-text">Advanced Navigation</span>
      <span class="route-path">{{ route.path }}</span>
    </div>
  </RouterLink>
</template>

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

<style scoped>
.custom-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-link:hover {
  border-color: #007bff;
  background: #f0f8ff;
}

.custom-link.active {
  border-color: #007bff;
  background: #e3f2fd;
}

.custom-link.exact-active {
  border-color: #0056b3;
  background: #bbdefb;
  font-weight: bold;
}
</style>

🎯 Best Practices

✅ Do Use When

• Creating navigation menus and links
• Need active state management
• Building accessible navigation
• Working with named routes and parameters

❌ Avoid When

• External links (use traditional <a> tags)
• Simple static links without routing needs
• Performance-critical simple navigation

🔧 Integration Examples

With Tailwind CSS

<template>
  <RouterLink
    to="/tailwind-example"
    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
    active-class="bg-indigo-800"
  >
    Tailwind Example
  </RouterLink>
</template>

With Vuex/Pinia

<template>
  <RouterLink
    to="/user-settings"
    @click="trackNavigation"
  >
    User Settings
  </RouterLink>
</template>

<script setup>
import { useStore } from 'vuex' // or Pinia

const store = useStore()

function trackNavigation() {
  store.dispatch('analytics/trackNavigation', {
    destination: '/user-settings',
    timestamp: Date.now()
  })
}
</script>

📚 Related Components

• RouterView - Component for rendering route components
• useLink() - Composable for custom link behavior
• useRouter() - Access router instance programmatically

---

💡 Pro Tip

Combine RouterLink with Vue's transition component for smooth navigation animations that enhance user experience!

Ready to build intelligent navigation? Start using RouterLink for declarative, type-safe routing in your Vue applications! 🧭