RouterLink and Navigation

<RouterLink> is Vue Router’s replacement for <a> tags. It generates a proper href but intercepts the click — no full page reload. It also automatically applies active classes when its route matches the current URL.

Basic <RouterLink>

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/add">Add Person</RouterLink>
  </nav>
</template>

The to prop is the destination. It works the same as the href in an <a> tag, but Vue Router handles the navigation.

Active link classes

Vue Router automatically adds CSS classes to <RouterLink> when the link matches the current URL:

• router-link-active — when the current path starts with the link’s path
• router-link-exact-active — when the current path exactly matches the link’s path

.router-link-exact-active {
  font-weight: bold;
  color: var(--accent);
}

This is how navbars highlight the current page without any JavaScript. For the / link specifically, use exact-active-class or check exact matches — otherwise / would match on every route.

Named routes

Instead of hardcoding paths in to, use the route name:

<RouterLink :to="{ name: 'home' }">Home</RouterLink>
<RouterLink :to="{ name: 'add' }">Add Person</RouterLink>

Named routes are more maintainable — if you change a path later, you only update the route definition, not every RouterLink that points to it.

Dynamic routes

Pass params for routes with dynamic segments:

<RouterLink :to="{ name: 'person', params: { id: person.id } }">
  View {{ person.name }}
</RouterLink>

<RouterLink :to="{ name: 'edit', params: { id: person.id } }">
  Edit
</RouterLink>

In FamilyTree

App.vue uses <RouterLink> for the nav, and components like FocusView use the useRouter composable for programmatic navigation (covered in Lesson 05). PersonCard emits a select event; the parent uses router.push() to navigate — keeping the navigation logic out of the small reusable component.

Exercise

1. In App.vue, replace any <a> tags in the nav with <RouterLink>.
2. Style router-link-exact-active in App.vue’s style block (or global CSS).
3. Add a RouterLink that links to a person’s detail page — pass a hardcoded id first, then try passing a variable.
4. Navigate between pages and confirm the active link styling works correctly.

Recap

• <RouterLink to="/path"> navigates without a page reload.
• Active classes (router-link-active, router-link-exact-active) highlight the current route automatically.
• Named routes: :to="{ name: 'routeName' }" — more maintainable than hardcoded paths.
• Dynamic params: :to="{ name: 'person', params: { id } }".