Vue Router Props: Passing Data to Components

This challenge focuses on a common and powerful feature in Vue Router: passing props directly to route components. This allows you to initialize your components with specific data based on the route, making your applications more dynamic and reusable. You'll learn how to define and access these props.

Problem Description

Your task is to create a Vue application that uses Vue Router to navigate between different views. Specifically, you need to configure a route so that it passes specific props to a target component. This component will then display the received props.

Key Requirements:

1. Route Definition: Define a route in your Vue Router configuration that has a dynamic parameter.
2. Prop Passing: Configure this route to pass the dynamic parameter value as a prop to the component associated with that route.
3. Component Implementation: Create a Vue component that accepts the prop defined in the route.
4. Display Prop: The component should display the value of the received prop.

Expected Behavior:

When a user navigates to a route that includes the dynamic parameter (e.g., /users/123), the UserDetail component should be rendered, and it should receive userId as a prop with the value 123. The UserDetail component should then display "User ID: 123".

Edge Cases to Consider:

• What happens if the dynamic parameter is not provided in the URL? (Vue Router's default behavior should handle this gracefully, but understanding it is good).
• Ensure the prop is correctly typed in your TypeScript component.

Examples

Example 1:

Route Configuration Snippet:

// In your router/index.ts
const routes: Array<RouteRecordRaw> = [
  {
    path: '/users/:userId',
    name: 'UserDetail',
    component: () => import('../views/UserDetail.vue'),
    props: true // This tells the router to pass route params as props
  },
  // ... other routes
];

UserDetail.vue Component Snippet (TypeScript):

<template>
  <div>
    <h2>User Details</h2>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps<{
  userId: string; // Expecting userId as a string from the route params
}>();
</script>

Scenario:

Navigating to the URL: /users/456

Output (rendered component):

<div>
  <h2>User Details</h2>
  <p>User ID: 456</p>
</div>

Explanation:

The route /users/:userId matches the URL /users/456. Because props: true is set in the route definition, the router automatically takes the userId parameter from the URL (456) and passes it as a prop named userId to the UserDetail component. The UserDetail component is defined to accept a userId prop of type string and displays its value.

Example 2:

Route Configuration Snippet:

// In your router/index.ts
const routes: Array<RouteRecordRaw> = [
  {
    path: '/products/:productId(\\d+)', // Regex to only match digits for productId
    name: 'ProductDetail',
    component: () => import('../views/ProductDetail.vue'),
    props: (route) => ({
      // Custom prop mapping: map route.params.productId to a prop named 'id'
      id: String(route.params.productId)
    })
  },
  // ... other routes
];

ProductDetail.vue Component Snippet (TypeScript):

<template>
  <div>
    <h2>Product Information</h2>
    <p>Product ID: {{ id }}</p>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps<{
  id: string; // Expecting 'id' as a string prop
}>();
</script>

Scenario:

Navigating to the URL: /products/789

Output (rendered component):

<div>
  <h2>Product Information</h2>
  <p>Product ID: 789</p>
</div>

Explanation:

The route /products/:productId(\\d+) matches the URL /products/789. The props: (route) => ({...}) configuration allows for custom prop mapping. Here, the productId from route.params is explicitly cast to a string and passed as a prop named id to the ProductDetail component. The ProductDetail component receives this id prop and displays it.

Constraints

• You must use Vue 3 with the Composition API (<script setup>).
• Vue Router version should be compatible with Vue 3.
• All component definitions and prop types must be in TypeScript.
• The solution should be a basic Vue application structure (e.g., using create-vue or a similar setup).
• You do not need to implement full navigation links, but the route definitions and components should be functional.

Notes

• Vue Router offers several ways to pass props:
  • props: true: Automatically pass route parameters as props to the component.
  • props: (route) => ({ ... }): A function that allows you to map and transform route parameters (or query, hash) into props.
  • props: { customProp: 'value' }: Static props passed to the component.
• Consider how route parameters are typed by default (they are often strings). Ensure your component's prop type matches what you intend to receive.
• Experiment with both props: true and the functional props configuration to understand their differences and use cases.