Dynamic Route Generation in a Vue.js Application

This challenge focuses on implementing dynamic routes in a Vue.js application using Vue Router. Dynamic routes allow you to create routes that handle a variable number of parameters, making your application more flexible and adaptable to different content structures. This is crucial for applications displaying content based on IDs, slugs, or other dynamic identifiers.

Problem Description

You are tasked with building a Vue.js application that utilizes dynamic routes to display details for different "products." The application should have a base route /products/:id where :id represents a product ID. When a user navigates to /products/123, the application should render a component that fetches and displays the details for product with ID 123. The application should also include a "Products List" page that links to each product's detail page.

Key Requirements:

Dynamic Route: Implement a dynamic route /products/:id using Vue Router.
Product Detail Component: Create a ProductDetail.vue component that receives the id parameter from the route.
Data Fetching: Within the ProductDetail.vue component, fetch product data based on the id parameter. For simplicity, you can use a mock data source (see "Notes" for an example).
Products List Component: Create a ProductsList.vue component that displays a list of products and links to each product's detail page using the dynamic route.
Route Navigation: Ensure that clicking on a product in the ProductsList.vue component correctly navigates the user to the corresponding product detail page.
Error Handling: If a product with the given ID is not found, display an appropriate error message (e.g., "Product not found").

Expected Behavior:

The application should start on the ProductsList.vue page.
The ProductsList.vue page should display a list of products.
Each product in the list should have a link that navigates to the /products/:id route when clicked.
When a user navigates to /products/:id, the ProductDetail.vue component should render.
The ProductDetail.vue component should fetch and display the product details for the specified ID.
If the product with the specified ID is not found, an error message should be displayed.

Edge Cases to Consider:

Invalid id values (e.g., non-numeric values). While you don't need to strictly validate the input, consider how the application should behave if a non-numeric ID is provided.
Product ID not found in the data source.
Empty product list in ProductsList.vue.

Examples

Example 1:

Input: User navigates to /products/5
Output: ProductDetail.vue component renders, displaying details for product with ID 5 (assuming product 5 exists in the mock data).
Explanation: Vue Router matches the /products/:id route, passing the 'id' parameter (5) to the ProductDetail component. The component fetches the data and displays it.

Example 2:

Input: User navigates to /products/99
Output: ProductDetail.vue component renders, displaying an error message "Product not found" (assuming product 99 does not exist in the mock data).
Explanation: Vue Router matches the /products/:id route, passing the 'id' parameter (99) to the ProductDetail component. The component fetches the data, but since the product is not found, it displays an error.

Example 3:

Input: ProductsList.vue displays a list of products with IDs 1, 2, and 3.
Output: Each product in the list has a link like this: <a href="/products/1">Product 1</a>, <a href="/products/2">Product 2</a>, <a href="/products/3">Product 3</a>
Explanation: The ProductsList component dynamically generates links to the product detail pages using the dynamic route.

Constraints

Data Source: You can use a simple JavaScript array as a mock data source for products. No external API calls are required.
Vue Version: Use Vue 3 with the Composition API.
Vue Router Version: Use Vue Router 4.
Component Structure: You must create at least two components: ProductsList.vue and ProductDetail.vue.
Performance: The solution should be reasonably performant for a small dataset (up to 100 products). No complex optimization is required.

Notes

Here's an example of a mock data source you can use:

const products = [
  { id: 1, name: 'Product 1', description: 'Description of Product 1' },
  { id: 2, name: 'Product 2', description: 'Description of Product 2' },
  { id: 3, name: 'Product 3', description: 'Description of Product 3' },
  { id: 4, name: 'Product 4', description: 'Description of Product 4' },
  { id: 5, name: 'Product 5', description: 'Description of Product 5' }
];

Within ProductDetail.vue, you can use watch or computed properties to react to changes in the route id parameter and fetch the corresponding product data. Remember to handle the case where the product is not found. Consider using provide/inject or a state management library (like Pinia) if you want to share the product data across components more effectively, but this is not strictly required for this challenge. Focus on the core dynamic routing functionality.