RouterLink for navigation in Vue - Mini Project: Build & Apply

RouterLink for navigation

📖 Scenario: You are building a simple Vue app with navigation links to switch between pages without reloading the browser.

🎯 Goal: Create a Vue component that uses RouterLink to navigate between a Home page and an About page.

📋 What You'll Learn

Create a Vue component with a navigation menu

Use RouterLink components to link to /home and /about routes

Add a router-view to display the current page content

Use the Composition API with <script setup>

💡 Why This Matters

🌍 Real World

Navigation menus are essential in web apps to let users move between pages smoothly without full page reloads.

💼 Career

Understanding RouterLink and router-view is key for frontend developers working with Vue to build single-page applications.

1

Set up the Vue component skeleton

Create a Vue component file with <template> and <script setup> tags. Inside the template, add a <nav> element for navigation links.

Vue

  
    
  



// Your code here

Need a hint?

Start by creating the basic Vue component structure with template and script setup tags.

2

Add RouterLink components for navigation

Inside the <nav> element, add two RouterLink components. One should link to /home with text Home, and the other to /about with text About. Import RouterLink from vue-router in the <script setup> section.

Vue

  
    
  



import { RouterLink } from 'vue-router'
// Your code here

Need a hint?

Use RouterLink components with the to attribute to create navigation links.

3

Add router-view to display page content

Below the <nav> element, add a <router-view> element inside the template. Import RouterView from vue-router in the <script setup> section.

Vue

  
    Home
    About
  
  



import { RouterLink, RouterView } from 'vue-router'
// Your code here

Need a hint?

The router-view element shows the current page component based on the route.

4

Complete the component with accessibility and structure

Add an aria-label attribute with value Primary navigation to the <nav> element for accessibility. Ensure the component uses semantic HTML and the navigation links are keyboard accessible.

Vue

  
    Home
    About
  
  



import { RouterLink, RouterView } from 'vue-router'
// Your code here

Need a hint?

Adding aria-label helps screen readers understand the navigation region.