Vue Router Setup for a Multi-Page Application

This challenge will guide you through setting up Vue Router in a Vue.js 3 TypeScript project. Properly configuring Vue Router is essential for building single-page applications (SPAs) with multiple views and navigation capabilities, providing a seamless user experience.

Problem Description

Your task is to create a robust Vue Router setup for a basic multi-page application. This involves defining routes, creating corresponding Vue components for each route, and configuring the router to manage navigation between these components.

Key Requirements:

1. Define Routes: Create routes for at least three distinct pages:
   • A Home page.
   • An About page.
   • A Contact page.
2. Create Components: Develop simple Vue components (written in TypeScript) for each of the defined routes. These components can be very basic, perhaps just displaying a heading like "Welcome to Home Page".
3. Configure Router:
   • Instantiate createRouter from vue-router.
   • Use the history mode (e.g., createWebHistory).
   • Define the routes array, mapping paths to components.
   • Include a "Not Found" route (e.g., /*) that redirects to a 404 page.
4. Integrate Router:
   • Import and install the configured router into your main Vue application (main.ts).
   • Use the <router-view> component in your root App.vue to render the matched route components.
   • Add navigation links (using <router-link>) in App.vue to allow users to navigate between the Home, About, and Contact pages.

Expected Behavior:

• When the application loads, the Home page should be displayed.
• Clicking on a navigation link (e.g., "About") should change the URL in the browser and render the corresponding component within <router-view>.
• Navigating to a non-existent path should display a "Page Not Found" message.

Edge Cases:

• Handling dynamic routes (though not strictly required for this basic setup, consider how you might approach it for future expansion).
• Ensuring type safety for route definitions and component props if applicable.

Examples

Example 1: Basic Navigation

• Input: A Vue.js 3 TypeScript project with the following file structure:

  • src/router/index.ts (to be created)
  • src/views/Home.vue (simple component)
  • src/views/About.vue (simple component)
  • src/views/Contact.vue (simple component)
  • src/App.vue (root component with <router-view> and links)
  • src/main.ts (application entry point)

• Output:

  • Navigating to / displays the Home.vue component.
  • Navigating to /about displays the About.vue component.
  • Navigating to /contact displays the Contact.vue component.

• Explanation: The router configuration in src/router/index.ts correctly maps these paths to their respective components, and App.vue's <router-link> elements facilitate the transitions.

Example 2: Not Found Route

• Input: The same setup as Example 1, but the user navigates to /nonexistent-page.

• Output: A component (e.g., NotFound.vue - you can create a simple one) is rendered, displaying a "404 - Page Not Found" message.

• Explanation: The catch-all route (/*) configured in src/router/index.ts intercepts any path that doesn't match other defined routes and renders the designated 404 component.

Constraints

• The project must use Vue.js 3 and TypeScript.
• Vue Router version 4 or later must be used.
• The createWebHistory mode should be used for routing.
• All route definitions and component types should be as type-safe as possible using TypeScript.
• The solution should be a clear and functional implementation of Vue Router.

Notes

• You'll need to install vue-router as a dependency in your project: npm install vue-router@next or yarn add vue-router@next.
• Consider creating a separate NotFound.vue component for the 404 route for better organization.
• Think about how you would structure your routes array for maintainability as the application grows.
• The main.ts file is where you'll typically create your Vue app instance and use the use() method to register the router plugin.
• For the components, you can use the Composition API (<script setup lang="ts">) or the Options API.