Building Navigational Links in Vue.js with Vue Router

This challenge focuses on implementing the fundamental navigation mechanism in a single-page application (SPA) using Vue.js and Vue Router. You will create interactive links that allow users to seamlessly navigate between different views within your application without a full page reload. This is a cornerstone of modern web development for providing a fluid user experience.

Problem Description

Your task is to create a Vue.js component that displays a list of navigational links. These links should utilize Vue Router's <router-link> component to manage navigation between different routes within your application. You will need to define sample routes and ensure that the <router-link> components correctly point to these routes and visually indicate when a link is active.

Key Requirements:

1. Component Creation: Create a Vue.js component (e.g., NavigationMenu.vue) that will house the navigation links.
2. Vue Router Integration: Use Vue Router's <router-link> component to create the navigational links.
3. Route Definition: Define a simple set of sample routes (e.g., 'Home', 'About', 'Contact') for your application.
4. Active Link Styling: Ensure that the <router-link> component correctly applies an active class to the link that corresponds to the current route.
5. Dynamic Link Text (Optional but Recommended): Make the link text dynamic based on the route's meta information or a prop passed to the link.

Expected Behavior:

When a user clicks on a navigation link, they should be navigated to the corresponding view without a page refresh. The clicked link should be visually highlighted (e.g., by adding a specific CSS class) to indicate that it is the currently active route.

Edge Cases to Consider:

• Root Path: Ensure the "Home" link correctly navigates to the root path (/).
• Nested Routes (Optional): If you decide to implement nested routes, ensure links to those routes function correctly.
• Invalid Routes: While not explicitly part of this challenge, consider how Vue Router handles attempts to navigate to non-existent routes.

Examples

Example 1: Basic Navigation

Input:
- A Vue component with <router-link> elements.
- Vue Router configured with the following routes:
  - path: '/', name: 'Home', component: HomeComponent
  - path: '/about', name: 'About', component: AboutComponent
  - path: '/contact', name: 'Contact', component: ContactComponent

Output:
A list of links: "Home", "About", "Contact".
Clicking "Home" navigates to '/', styling the "Home" link as active.
Clicking "About" navigates to '/about', styling the "About" link as active.
Clicking "Contact" navigates to '/contact', styling the "Contact" link as active.

Example 2: Active Link Styling

Input:
- Vue Router configured with default active-class="active-link".
- User is currently on the '/about' route.

Output:
The "About" link will have the class "active-link" applied.
The "Home" and "Contact" links will not have the "active-link" class.

Constraints

• You must use Vue 3 and TypeScript.
• Vue Router should be installed and configured correctly in your project.
• The solution should be implemented within a single Vue component for navigation.
• No external libraries for routing are allowed other than Vue Router.

Notes

• Remember to import createRouter, createWebHistory (or createWebHashHistory), and define your routes.
• The <router-link> component automatically adds an active-class attribute (by default router-link-active) when the route it links to is matched. You can customize this class name.
• Consider how you will render the different components associated with each route. A <router-view> component is essential for this.
• Think about passing dynamic to props to <router-link> for more flexible navigation.