Implementing Vue Router in a Vue 3 TypeScript Project

This challenge focuses on setting up Vue Router within a Vue 3 project using TypeScript. Proper routing is essential for building Single Page Applications (SPAs) with multiple views and navigation, and understanding how to configure it correctly is a fundamental skill. You will be creating a basic router setup with a few defined routes and a component to display the current route's name.

Problem Description

You are tasked with creating a Vue 3 project with TypeScript and configuring Vue Router to navigate between three distinct routes: /home, /about, and /contact. Each route should map to a corresponding component that simply displays the route's name (e.g., the /home route should display "Home"). The application should include a navigation bar with links to each of these routes. The router should be properly initialized and accessible within your application.

Key Requirements:

• Vue 3 Project: The solution must be a functional Vue 3 project.
• TypeScript: The code must be written in TypeScript.
• Vue Router: Vue Router must be installed and configured correctly.
• Three Routes: Implement routes for /home, /about, and /contact.
• Route Components: Create simple components to display the route name for each route.
• Navigation Links: Include a navigation bar with links to each route.
• Functional Application: The application should be fully functional and navigable.

Expected Behavior:

1. When the application loads, it should initially render the component associated with the /home route.
2. Clicking on the navigation links should navigate the user to the corresponding route.
3. Each route component should display its respective route name (e.g., "Home", "About", "Contact").
4. The URL in the browser should update to reflect the current route.

Edge Cases to Consider:

• Ensure the router is properly initialized and handles route changes correctly.
• Consider how to handle potential errors during route navigation (though error handling is not a primary focus of this challenge).

Examples

Example 1:

Input: User navigates to /about
Output: The component associated with the /about route is rendered, displaying "About". The browser's URL is updated to /about.
Explanation: Clicking the "About" link in the navigation bar triggers the router to navigate to the /about route, rendering the corresponding component.

Example 2:

Input: User navigates to /contact
Output: The component associated with the /contact route is rendered, displaying "Contact". The browser's URL is updated to /contact.
Explanation: Clicking the "Contact" link in the navigation bar triggers the router to navigate to the /contact route, rendering the corresponding component.

Example 3: (Initial Load)

Input: Application loads
Output: The component associated with the /home route is rendered, displaying "Home". The browser's URL is /home.
Explanation: The router is configured to initially render the /home route when the application starts.

Constraints

• Project Structure: You are free to organize your project as you see fit, but a clear and maintainable structure is encouraged.
• Dependencies: You are allowed to use Vue Router and any necessary helper libraries.
• Component Complexity: The route components should be very simple (just displaying the route name). Complex logic is not required.
• Time Limit: Assume a reasonable time limit of 30-45 minutes to complete this challenge.

Notes

• Start by setting up a basic Vue 3 project with TypeScript.
• Install Vue Router using npm or yarn.
• Define your routes in a separate file (e.g., router.ts) for better organization.
• Use <router-link> components for navigation.
• Ensure your components are properly registered and imported.
• Focus on the core router setup and navigation functionality. Styling is not required.