0
# Built-in Components
1

2
RouterLink and RouterView components for declarative navigation and route rendering. These components provide the fundamental building blocks for creating navigable Vue.js applications.
3

4
## Capabilities
5

6
### RouterLink Component
7

8
Declarative navigation component that renders links with automatic active state detection and navigation handling.
9

10
```javascript { .api }
11
/**
12
 * RouterLink component props
13
 */
14
interface RouterLinkProps {
15
  /** Target route location */
16
  to: string | Location;
17
  /** Use replace instead of push navigation */
18
  replace?: boolean;
19
  /** Append relative path to current path */
20
  append?: boolean;
21
  /** HTML tag to render (default: 'a') */
22
  tag?: string;
23
  /** When using scoped slots, prevents wrapping in anchor element (Vue Router 4 compatibility) */
24
  custom?: boolean;
25
  /** CSS class for active state */
26
  activeClass?: string;
27
  /** CSS class for exact active state */
28
  exactActiveClass?: string;
29
  /** Use exact matching for active state */
30
  exact?: boolean;
31
  /** Only match path portion (ignore query and hash) */
32
  exactPath?: boolean;
33
  /** CSS class for exact path active state */
34
  exactPathActiveClass?: string;
35
  /** Events that trigger navigation */
36
  event?: string | string[];
37
  /** aria-current attribute value for accessibility */
38
  ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
39
}
40

41
/**
42
 * RouterLink scoped slot argument
43
 */
44
interface RouterLinkSlotArgument {
45
  /** Resolved URL for the link */
46
  href: string;
47
  /** Resolved route object */
48
  route: Route;
49
  /** Navigation function */
50
  navigate: (e?: MouseEvent) => Promise<undefined | NavigationFailure>;
51
  /** Whether link is active */
52
  isActive: boolean;
53
  /** Whether link is exact active */
54
  isExactActive: boolean;
55
}
56
```
57

58
**Usage Examples:**
59

60
```javascript
61
// Basic RouterLink usage
62
<router-link to="/">Home</router-link>
63
<router-link to="/about">About</router-link>
64

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

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

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

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

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

80
// Custom active classes
81
<router-link 
82
  to="/dashboard" 
83
  active-class="is-active"
84
  exact-active-class="is-exact-active"
85
>
86
  Dashboard
87
</router-link>
88

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

94
// Scoped slot for custom rendering
95
<router-link to="/profile" v-slot="{ href, route, navigate, isActive, isExactActive }">
96
  <li :class="{ active: isActive }">
97
    <a :href="href" @click="navigate" class="nav-link">
98
      {{ route.name }} 
99
      <span v-if="isExactActive" class="exact-marker">→</span>
100
    </a>
101
  </li>
102
</router-link>
103
```
104

105
### RouterView Component
106

107
Component that renders the matched component for the current route, with support for named views and transitions.
108

109
```javascript { .api }
110
/**
111
 * RouterView component props
112
 */
113
interface RouterViewProps {
114
  /** Name of the view (for named views) */
115
  name?: string;
116
}
117
```
118

119
**Usage Examples:**
120

121
```javascript
122
// Basic RouterView usage
123
<template>
124
  <div id="app">
125
    <nav>
126
      <router-link to="/">Home</router-link>
127
      <router-link to="/about">About</router-link>
128
    </nav>
129
    <main>
130
      <router-view></router-view>
131
    </main>
132
  </div>
133
</template>
134

135
// Named views
136
<template>
137
  <div>
138
    <router-view name="header"></router-view>
139
    <router-view></router-view> <!-- default view -->
140
    <router-view name="sidebar"></router-view>
141
  </div>
142
</template>
143

144
// Route configuration for named views
145
const routes = [
146
  {
147
    path: '/dashboard',
148
    components: {
149
      default: Dashboard,
150
      header: DashboardHeader,
151
      sidebar: DashboardSidebar
152
    }
153
  }
154
];
155

156
// With transitions
157
<template>
158
  <transition name="fade" mode="out-in">
159
    <router-view></router-view>
160
  </transition>
161
</template>
162

163
// Dynamic transitions based on route
164
<template>
165
  <transition :name="transitionName" mode="out-in">
166
    <router-view></router-view>
167
  </transition>
168
</template>
169

170
<script>
171
export default {
172
  computed: {
173
    transitionName() {
174
      return this.$route.meta.transition || 'fade';
175
    }
176
  }
177
};
178
</script>
179

180
// Nested router-view for child routes
181
<!-- Parent component template -->
182
<template>
183
  <div class="user">
184
    <h2>User {{ $route.params.id }}</h2>
185
    <!-- Child routes render here -->
186
    <router-view></router-view>
187
  </div>
188
</template>
189
```
190

191
### Active Link Detection
192

193
Understanding how RouterLink determines active state.
194

195
```javascript { .api }
196
/**
197
 * Active link detection logic
198
 */
199
interface ActiveLinkDetection {
200
  /** 
201
   * Default active: current path starts with link path
202
   * /users/123 is active for link to /users
203
   */
204
  inclusive: boolean;
205
  
206
  /** 
207
   * Exact active: current path exactly matches link path
208
   * Only /users is exact active for link to /users
209
   */
210
  exact: boolean;
211
  
212
  /** 
213
   * Exact path: only path portion matters (ignores query/hash)
214
   * /users?tab=1 is exact path active for link to /users
215
   */
216
  exactPath: boolean;
217
}
218
```
219

220
**Usage Examples:**
221

222
```javascript
223
// Current route: /users/123/profile
224

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

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

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

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

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

244
<router-link to="/users/123" exact-active-class="nav-exact">
245
  <!-- Gets 'nav-exact' class when exact active -->
246
</router-link>
247
```
248

249
### Navigation Events
250

251
Control when RouterLink triggers navigation.
252

253
```javascript { .api }
254
/**
255
 * Navigation event configuration
256
 */
257
interface NavigationEvents {
258
  /** Single event name */
259
  event?: string;
260
  /** Multiple event names */
261
  event?: string[];
262
}
263
```
264

265
**Usage Examples:**
266

267
```javascript
268
// Default click navigation
269
<router-link to="/about">About</router-link>
270

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

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

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

286
<script>
287
export default {
288
  methods: {
289
    handleCustomClick(navigate) {
290
      // Custom logic before navigation
291
      if (this.canNavigate()) {
292
        navigate();
293
      }
294
    }
295
  }
296
};
297
</script>
298
```
299

300
### Programmatic RouterLink
301

302
Using RouterLink functionality programmatically.
303

304
```javascript { .api }
305
/**
306
 * Access RouterLink functionality in JavaScript
307
 */
308
interface ProgrammaticRouterLink {
309
  /** Resolve link href */
310
  resolve(to: RawLocation): { href: string; route: Route };
311
  /** Check if route is active */
312
  isActive(route: Route): boolean;
313
  /** Navigate programmatically */
314
  navigate(to: RawLocation): Promise<Route>;
315
}
316
```
317

318
**Usage Examples:**
319

320
```javascript
321
// In component methods
322
export default {
323
  methods: {
324
    navigateToUser(userId) {
325
      this.$router.push({ name: 'user', params: { id: userId }});
326
    },
327
    
328
    checkIfActive(route) {
329
      // Manual active state checking
330
      const resolved = this.$router.resolve(route);
331
      return this.$route.path.startsWith(resolved.route.path);
332
    },
333
    
334
    generateLink(to) {
335
      const resolved = this.$router.resolve(to);
336
      return resolved.href;
337
    }
338
  },
339
  
340
  computed: {
341
    userLinks() {
342
      return this.users.map(user => ({
343
        text: user.name,
344
        href: this.$router.resolve({ 
345
          name: 'user', 
346
          params: { id: user.id }
347
        }).href
348
      }));
349
    }
350
  }
351
};
352
```
353

354
### Accessibility Features
355

356
RouterLink includes built-in accessibility support.
357

358
```javascript { .api }
359
/**
360
 * Accessibility features
361
 */
362
interface AccessibilityFeatures {
363
  /** aria-current attribute for current page */
364
  ariaCurrentValue?: string;
365
  /** Automatic role and aria attributes */
366
  automaticAria: boolean;
367
  /** Keyboard navigation support */
368
  keyboardSupport: boolean;
369
}
370
```
371

372
**Usage Examples:**
373

374
```javascript
375
// Custom aria-current value
376
<router-link 
377
  to="/current-step" 
378
  aria-current-value="step"
379
  exact
380
>
381
  Current Step
382
</router-link>
383

384
// Navigation breadcrumbs
385
<nav aria-label="Breadcrumb">
386
  <ol>
387
    <li>
388
      <router-link to="/" aria-current-value="page" exact>
389
        Home
390
      </router-link>
391
    </li>
392
    <li>
393
      <router-link to="/products" aria-current-value="page" exact>
394
        Products
395
      </router-link>
396
    </li>
397
  </ol>
398
</nav>
399

400
// Skip to content link
401
<router-link to="#main-content" class="skip-link">
402
  Skip to main content
403
</router-link>
404
```
405

406
## Types
407

408
```javascript { .api }
409
interface Location {
410
  name?: string;
411
  path?: string;
412
  hash?: string;
413
  query?: Dictionary<string | (string | null)[] | null | undefined>;
414
  params?: Dictionary<string>;
415
  append?: boolean;
416
  replace?: boolean;
417
}
418

419
interface NavigationFailure extends Error {
420
  from: Route;
421
  to: Route;
422
  type: NavigationFailureType;
423
}
424

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