Vue Router Configuration: Building a Multi-Page Application

This challenge focuses on setting up and configuring routes for a Vue.js application using TypeScript. You will learn how to define different views (pages) for your application and navigate between them seamlessly, a fundamental aspect of building any interactive web application.

Problem Description

Your task is to implement a basic route configuration for a Vue.js application using Vue Router. You'll need to create several distinct components that represent different "pages" of your application and then define routes that map specific URL paths to these components. The application should support navigation between these pages.

Key Requirements:

Create Components: Develop at least three separate Vue components (e.g., HomePage.vue, AboutPage.vue, ContactPage.vue) that will serve as different views. These components can be simple placeholders for now, displaying some text indicating which page is active.
Vue Router Setup: Initialize and configure Vue Router in your Vue application.
Define Routes: Create an array of route objects, where each object maps a URL path (e.g., /, /about, /contact) to its corresponding component.
Navigation: Implement basic navigation, likely using <router-link> components, to allow users to switch between the defined pages.
Router View: Ensure a <router-view> component is present in your main App component to render the active route's component.
TypeScript: All your Vue components and the router configuration should be written in TypeScript.

Expected Behavior:

When the application runs:

Visiting the root URL (/) should display the HomePage component.
Visiting /about should display the AboutPage component.
Visiting /contact should display the ContactPage component.
Clicking on navigation links should update the URL in the browser and render the correct component in the <router-view>.

Edge Cases to Consider:

Not Found (404) Route: Implement a fallback route to handle any URLs that do not match defined routes. This route should display a "Page Not Found" message.

Examples

Example 1: Basic Navigation

Input: A Vue application with HomePage.vue, AboutPage.vue, and a router configuration mapping / to HomePage and /about to AboutPage. The App.vue contains <router-link to="/">Home</router-link> and <router-link to="/about">About</router-link> and <router-view />.
Output:
- When the user navigates to /, the text "Welcome to the Home Page!" is displayed.
- When the user clicks the "About" link, the URL changes to /about, and the text "Learn more about us here." is displayed.
Explanation: The router correctly maps the paths to their respective components, and the <router-link> component facilitates navigation.

Example 2: 404 Route

Input: The application from Example 1, with an additional route for path: '/(.*)' pointing to a NotFound.vue component.
Output: When the user navigates to /non-existent-page, the URL changes, and the text "Oops! Page not found." is displayed.
Explanation: The catch-all route handles any invalid paths by rendering the NotFound component.

Constraints

You must use the official vue-router package.
The project structure should follow standard Vue CLI or Vite conventions.
All component and router configuration files should be in TypeScript (.vue files with <script lang="ts">, and .ts files for router setup).
No external state management libraries (like Pinia or Vuex) are required for this challenge.

Notes

Familiarize yourself with the createRouter and createWebHistory functions from vue-router.
The <router-link> component is your primary tool for declarative navigation within the application.
Consider how you will import and register your components within the router configuration.
Think about the order of your routes, especially for the "Not Found" route, which should typically be the last one defined.

Problem Description

Key Requirements:

Create Components: Develop at least three separate Vue components (e.g., HomePage.vue, AboutPage.vue, ContactPage.vue) that will serve as different views. These components can be simple placeholders for now, displaying some text indicating which page is active.

Vue Router Setup: Initialize and configure Vue Router in your Vue application.

Define Routes: Create an array of route objects, where each object maps a URL path (e.g., /, /about, /contact) to its corresponding component.

Navigation: Implement basic navigation, likely using <router-link> components, to allow users to switch between the defined pages.

Router View: Ensure a <router-view> component is present in your main App component to render the active route's component.

TypeScript: All your Vue components and the router configuration should be written in TypeScript.

Expected Behavior:

When the application runs:

Visiting the root URL (/) should display the HomePage component.

Visiting /about should display the AboutPage component.

Visiting /contact should display the ContactPage component.

Clicking on navigation links should update the URL in the browser and render the correct component in the <router-view>.

Edge Cases to Consider:

Not Found (404) Route: Implement a fallback route to handle any URLs that do not match defined routes. This route should display a "Page Not Found" message.

Examples

Example 1: Basic Navigation

Input: A Vue application with HomePage.vue, AboutPage.vue, and a router configuration mapping / to HomePage and /about to AboutPage. The App.vue contains <router-link to="/">Home</router-link> and <router-link to="/about">About</router-link> and <router-view />.

Output:

When the user navigates to /, the text "Welcome to the Home Page!" is displayed.
When the user clicks the "About" link, the URL changes to /about, and the text "Learn more about us here." is displayed.

Explanation: The router correctly maps the paths to their respective components, and the <router-link> component facilitates navigation.

Example 2: 404 Route

Input: The application from Example 1, with an additional route for path: '/(.*)' pointing to a NotFound.vue component.

Output: When the user navigates to /non-existent-page, the URL changes, and the text "Oops! Page not found." is displayed.

Explanation: The catch-all route handles any invalid paths by rendering the NotFound component.

Constraints

You must use the official vue-router package.

The project structure should follow standard Vue CLI or Vite conventions.

All component and router configuration files should be in TypeScript (.vue files with <script lang="ts">, and .ts files for router setup).

No external state management libraries (like Pinia or Vuex) are required for this challenge.

Notes

Familiarize yourself with the createRouter and createWebHistory functions from vue-router.

The <router-link> component is your primary tool for declarative navigation within the application.

Consider how you will import and register your components within the router configuration.

Think about the order of your routes, especially for the "Not Found" route, which should typically be the last one defined.