Built-in Components

/**
 * RouterLink component props
 */
interface RouterLinkProps {
  /** Target route location */
  to: string | Location;
  /** Use replace instead of push navigation */
  replace?: boolean;
  /** Append relative path to current path */
  append?: boolean;
  /** HTML tag to render (default: 'a') */
  tag?: string;
  /** When using scoped slots, prevents wrapping in anchor element (Vue Router 4 compatibility) */
  custom?: boolean;
  /** CSS class for active state */
  activeClass?: string;
  /** CSS class for exact active state */
  exactActiveClass?: string;
  /** Use exact matching for active state */
  exact?: boolean;
  /** Only match path portion (ignore query and hash) */
  exactPath?: boolean;
  /** CSS class for exact path active state */
  exactPathActiveClass?: string;
  /** Events that trigger navigation */
  event?: string | string[];
  /** aria-current attribute value for accessibility */
  ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
}

/**
 * RouterLink scoped slot argument
 */
interface RouterLinkSlotArgument {
  /** Resolved URL for the link */
  href: string;
  /** Resolved route object */
  route: Route;
  /** Navigation function */
  navigate: (e?: MouseEvent) => Promise<undefined | NavigationFailure>;
  /** Whether link is active */
  isActive: boolean;
  /** Whether link is exact active */
  isExactActive: boolean;
}

// Basic RouterLink usage
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

// Named route navigation
<router-link :to="{ name: 'user', params: { id: 123 }}">User Profile</router-link>

// With query parameters
<router-link :to="{ path: '/search', query: { q: 'vue' }}">Search</router-link>

// Replace navigation (no history entry)
<router-link to="/login" replace>Login</router-link>

// Append to current path
<router-link to="profile" append>Profile</router-link>

// Custom tag
<router-link to="/about" tag="button">About Button</router-link>

// Custom active classes
<router-link 
  to="/dashboard" 
  active-class="is-active"
  exact-active-class="is-exact-active"
>
  Dashboard
</router-link>

// Custom events
<router-link to="/contact" :event="['mousedown', 'touchstart']">
  Contact
</router-link>

// Scoped slot for custom rendering
<router-link to="/profile" v-slot="{ href, route, navigate, isActive, isExactActive }">
  <li :class="{ active: isActive }">
    <a :href="href" @click="navigate" class="nav-link">
      {{ route.name }} 
      <span v-if="isExactActive" class="exact-marker">→</span>
    </a>
  </li>
</router-link>

/**
 * RouterView component props
 */
interface RouterViewProps {
  /** Name of the view (for named views) */
  name?: string;
}

// Basic RouterView usage
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

// Named views
<template>
  <div>
    <router-view name="header"></router-view>
    <router-view></router-view> <!-- default view -->
    <router-view name="sidebar"></router-view>
  </div>
</template>

// Route configuration for named views
const routes = [
  {
    path: '/dashboard',
    components: {
      default: Dashboard,
      header: DashboardHeader,
      sidebar: DashboardSidebar
    }
  }
];

// With transitions
<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

// Dynamic transitions based on route
<template>
  <transition :name="transitionName" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<script>
export default {
  computed: {
    transitionName() {
      return this.$route.meta.transition || 'fade';
    }
  }
};
</script>

// Nested router-view for child routes
<!-- Parent component template -->
<template>
  <div class="user">
    <h2>User {{ $route.params.id }}</h2>
    <!-- Child routes render here -->
    <router-view></router-view>
  </div>
</template>

/**
 * Active link detection logic
 */
interface ActiveLinkDetection {
  /** 
   * Default active: current path starts with link path
   * /users/123 is active for link to /users
   */
  inclusive: boolean;
  
  /** 
   * Exact active: current path exactly matches link path
   * Only /users is exact active for link to /users
   */
  exact: boolean;
  
  /** 
   * Exact path: only path portion matters (ignores query/hash)
   * /users?tab=1 is exact path active for link to /users
   */
  exactPath: boolean;
}

// Current route: /users/123/profile

// Active (inclusive matching) - default behavior
<router-link to="/users">Users</router-link> <!-- active -->
<router-link to="/users/123">User</router-link> <!-- active -->

// Exact active - only exact matches
<router-link to="/users" exact>Users</router-link> <!-- not active -->
<router-link to="/users/123/profile" exact>Profile</router-link> <!-- active -->

// Exact path - ignores query and hash
<router-link to="/users/123/profile" exact-path>Profile</router-link> <!-- active -->

// Current route: /users/123/profile?tab=settings#section1
<router-link to="/users/123/profile" exact-path>Profile</router-link> <!-- still active -->

// CSS classes applied automatically
<router-link to="/users" active-class="nav-active">
  <!-- Gets 'nav-active' class when active -->
</router-link>

<router-link to="/users/123" exact-active-class="nav-exact">
  <!-- Gets 'nav-exact' class when exact active -->
</router-link>

/**
 * Navigation event configuration
 */
interface NavigationEvents {
  /** Single event name */
  event?: string;
  /** Multiple event names */
  event?: string[];
}

// Default click navigation
<router-link to="/about">About</router-link>

// Custom single event
<router-link to="/profile" event="mousedown">Profile</router-link>

// Multiple events
<router-link to="/contact" :event="['mousedown', 'touchstart']">
  Contact
</router-link>

// Disable navigation events (for custom handling)
<router-link to="/custom" :event="[]" v-slot="{ navigate }">
  <button @click="handleCustomClick(navigate)">
    Custom Navigation
  </button>
</router-link>

<script>
export default {
  methods: {
    handleCustomClick(navigate) {
      // Custom logic before navigation
      if (this.canNavigate()) {
        navigate();
      }
    }
  }
};
</script>

/**
 * Access RouterLink functionality in JavaScript
 */
interface ProgrammaticRouterLink {
  /** Resolve link href */
  resolve(to: RawLocation): { href: string; route: Route };
  /** Check if route is active */
  isActive(route: Route): boolean;
  /** Navigate programmatically */
  navigate(to: RawLocation): Promise<Route>;
}

// In component methods
export default {
  methods: {
    navigateToUser(userId) {
      this.$router.push({ name: 'user', params: { id: userId }});
    },
    
    checkIfActive(route) {
      // Manual active state checking
      const resolved = this.$router.resolve(route);
      return this.$route.path.startsWith(resolved.route.path);
    },
    
    generateLink(to) {
      const resolved = this.$router.resolve(to);
      return resolved.href;
    }
  },
  
  computed: {
    userLinks() {
      return this.users.map(user => ({
        text: user.name,
        href: this.$router.resolve({ 
          name: 'user', 
          params: { id: user.id }
        }).href
      }));
    }
  }
};

/**
 * Accessibility features
 */
interface AccessibilityFeatures {
  /** aria-current attribute for current page */
  ariaCurrentValue?: string;
  /** Automatic role and aria attributes */
  automaticAria: boolean;
  /** Keyboard navigation support */
  keyboardSupport: boolean;
}

// Custom aria-current value
<router-link 
  to="/current-step" 
  aria-current-value="step"
  exact
>
  Current Step
</router-link>

// Navigation breadcrumbs
<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <router-link to="/" aria-current-value="page" exact>
        Home
      </router-link>
    </li>
    <li>
      <router-link to="/products" aria-current-value="page" exact>
        Products
      </router-link>
    </li>
  </ol>
</nav>

// Skip to content link
<router-link to="#main-content" class="skip-link">
  Skip to main content
</router-link>

interface Location {
  name?: string;
  path?: string;
  hash?: string;
  query?: Dictionary<string | (string | null)[] | null | undefined>;
  params?: Dictionary<string>;
  append?: boolean;
  replace?: boolean;
}

interface NavigationFailure extends Error {
  from: Route;
  to: Route;
  type: NavigationFailureType;
}

type Dictionary<T> = { [key: string]: T };
type Component = {} | Vue.Component | Vue.AsyncComponent;