Vue Router: Navigation & Views

The Big Picture: How Routing Components Work

Before we dive into the code, let's look at a high-level diagram. This will help you visualize how the pieces fit together in a single-page application (SPA).

As you can see, RouterView is the central "outlet" where different page components appear. The navigation links, which we'll build with RouterLink, tell the router to change the component displayed in that outlet.

Part 1: <RouterView> - The Content Outlet

The <RouterView> component is a placeholder that marks the spot where the component for the current route should be rendered.

Think of your App.vue file as the frame of your application. It might contain a consistent header, navigation bar, and footer that should appear on every page. The <RouterView> is the canvas within that frame, and Vue Router paints the appropriate page component onto it based on the URL.

A typical structure for your main App.vue file would look like this:

<template>
  <header>
    <!-- Your persistent navigation will go here -->
  </header>

  <main>
    <!-- This is where your page components will be rendered -->
    <RouterView />
  </main>

  <footer>
    <!-- A persistent footer -->
  </footer>
</template>

To see a clear explanation of how <RouterView> works and where to place it, watch the following video segment.

Part 2: <RouterLink> - Navigating Without Page Reloads

Now that we have a place to render our components, we need a way to navigate between them. You might be tempted to use a standard HTML anchor tag (<a>). However, in an SPA, this is the wrong tool for the job.

An <a> tag with an href attribute will trigger a full-page reload from the server. This re-initializes your entire Vue application, losing any state (like form inputs or counter values) and defeating the speed and seamlessness of a single-page app.

The solution is the <RouterLink> component. It looks and renders like an <a> tag, but it has special behavior:

• It listens for clicks.
• It prevents the browser's default behavior of making a new server request.
• It updates the URL in the address bar using the browser's History API.
• It tells Vue Router to render the new component inside the <RouterView>.

The following video brilliantly demonstrates the problem with <a> tags and how <RouterLink> solves it. It also shows you a bonus feature: how to style the currently active link.

Part 3: Your Turn - Building the Main App Navigation

Let's apply these concepts to your personal profile project. You'll refactor your App.vue to create the main application shell with a persistent navigation bar.

1. Clean up and Structure App.vue
Open your src/App.vue file. If it has any content from previous exercises (like the temporary links to projects), remove it. We're building the final layout now.

Structure your template like this. For now, you don't need to import <RouterLink> or <RouterView> if you're using <script setup>; they are made globally available when you install the router.

// src/App.vue

<template>
  <div id="app-layout">
    <header class="app-header">
      <nav>
        <!-- Links will go here -->
      </nav>
    </header>

    <main class="app-main">
      <RouterView />
    </main>
  </div>
</template>

<style scoped>
/* Basic styling to get you started */
.app-header {
  background-color: #f8f9fa;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
}

nav {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.app-main {
  padding: 2rem;
  max-width: 960px;
  margin: 0 auto;
}
</style>

2. Add Navigation Links with <RouterLink>
Inside the <nav> tags, add <RouterLink> components to navigate to your Home, About, and Contact pages. Use the to prop to specify the path.

// src/App.vue (inside the <nav>)
<nav>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>
  <RouterLink to="/contact">Contact</RouterLink>
</nav>

3. Style the Active Link
As you saw in the video, Vue Router automatically adds CSS classes to active links. The default class is router-link-active. Let's add a style to make it clear which page is currently active.

Add this to the <style> block in App.vue:

/* Add this inside your <style scoped> block */
nav a.router-link-active {
  font-weight: bold;
  color: #0d6efd;
  text-decoration: underline;
}

/* Optional: General link styling */
nav a {
  text-decoration: none;
  color: #333;
}

Now, run your application (npm run dev). You should see your navigation bar at the top. As you click between Home, About, and Contact, the content in the main area should change, the URL should update, and the active link should be styled—all without any page reloads!

Conclusion

You've now implemented the two most essential user-facing components of Vue Router. This structure is the foundation for almost any multi-page Vue application you will build.

Key Takeaways:

• <RouterView /> is the placeholder component that renders the component corresponding to the current URL. It's the "canvas" for your pages.
• <RouterLink to="..."> is the correct component for SPA navigation. It updates the URL and swaps components without a full page reload, preserving your application's state.
• It's a best practice to place your main navigation and <RouterView> in your root App.vue component to create a persistent layout.
• Vue Router helps with UX by automatically adding classes like router-link-active to the current link, making it easy to style.

In our next lesson, we'll finally connect all the pieces. You will learn to fetch data from a REST API within a component's onMounted lifecycle hook. We'll navigate to a dynamic project page (e.g., /projects/123), and use the id from the URL to fetch and display that specific project's data.